使用 JavaScript 的图像缩小功能
image zoom out feature using javascript
我正在做一个项目,其中当用户单击图像时,图像会放大,而再次单击时图像会缩小。如何在此处在我的代码中制作缩小功能
function resizeImg (img) {
var scale = 150/100;
var pos = $(img).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(img).parent().get(0);
$(img).css({
width: img.width*scale,
height: img.height*scale
});
container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
这里不需要很多javascript。只是一些好的CSS,如下所示:http://jsfiddle.net/95wqh/10/
.JS:
$('.image').on('click', function () {
$(this).toggleClass('zoom');
});
.css:
#Container {
position:relative;
overflow:auto;
}
.zoom{
-webkit-transform : scale(1.5);
transform: scale(1.5);
}
尝试查看以下代码是否对您有帮助。演示
编辑:以防万一您想在同一页面中的多个图像上执行此操作。
var zoom = "in";
$('.image').on('click', function () {
this.zoom = (this.zoom == "in") ? "out" : "in";
console.log(this.zoom);
resizeImg(this);
});
function resizeImg (img) {
var scale = 150/100;
var pos = $(img).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(img).parent().get(0);
if(img.zoom == "in"){
$(img).css({
width: img.width*scale,
height: img.height*scale
});
}
else if (img.zoom == "out"){
$(img).css({
width: img.width/scale,
height: img.height/scale
});
}
container.scrollLeft = ($(container).width() / -2 ) + clickX * scale;
container.scrollTop = ($(container).height() / -2 ) + clickY * scale;
}
如果您有多个图像,这也可能对您有所帮助
JSfiddle: http://jsfiddle.net/95wqh/14/
JS代码:
$('.image').on('click', function () {
if (typeof this.toggleZoom === "undefined") this.toggleZoom = false;
this.toggleZoom = !this.toggleZoom;
resizeImg(this);
});
function resizeImg(img) {
var scale = (img.toggleZoom) ? 150 / 100 : 100 / 150;
console.log(scale);
var pos = $(img).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(img).parent().get(0);
$(img).css({
width: img.width * scale,
height: img.height * scale
});
container.scrollLeft = ($(container).width() / -2) + clickX * scale;
container.scrollTop = ($(container).height() / -2) + clickY * scale;
}
我添加了什么
if (typeof this.toggleZoom === "undefined") this.toggleZoom = false;
this.toggleZoom = !this.toggleZoom;
和
var scale = (img.toggleZoom) ? 150 / 100 : 100 / 150;
演示
演示 处理多个图像
$('img').attr('zoom', 0);
$('.image').on('click', function () {
resizeImg(this);
});
function resizeImg(img) {
var zoom = $(img).attr('zoom');
if (zoom == 0) {
var scale = 150 / 100;
var pos = $(img).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(img).parent().get(0);
$(img).css({
width: img.width * scale,
height: img.height * scale
}).attr('zoom', 1);
container.scrollLeft = ($(container).width() / -2) + clickX * scale;
container.scrollTop = ($(container).height() / -2) + clickY * scale;
}else{
$(img).attr('zoom',0).attr('style','');
}
}
为所有图像设置 zoom
属性 = 0 --> $('img').attr('zoom', 0);
如果zoom
属性设置为 0
我们将制作效果并设置属性zoom
zoom=1
否则,zoom
属性设置为已缩放1
,我们将属性设置为zoom=0
并删除style
属性以使图像恢复正常。
相关文章:
- 添加文字和评论功能更新Div
- JavaScript打印功能使日历停止工作
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 如何防止网页加载后自动启动功能
- 除修剪外的其他功能
- 悬停功能触发器
- 使用angularjs向浏览器发送servlet响应(下载功能)
- 删除CKEditor工具栏按钮,但不删除功能
- 异步facebook功能
- 如何将chrome扩展功能移植到移动设备(特别是jquery和trello)
- jQuery滚动功能只工作一次
- Graphiti中是否有任何工具提示功能
- React redux初始化功能,无论状态变化如何
- 创建缩放功能当我们点击签署整个页面获得缩放,当我们点击-签署它获得缩小
- 如何使用CSS或JQuery使整个网页看起来更小(就像Chrome的缩小功能一样)
- 删除Highmaps的放大/缩小功能
- jQuery 完整版和缩小版主要功能差异
- CSS缩小Magento的默认功能不起作用
- 使用 JavaScript 的图像缩小功能
- jquery mobile或javascript中的放大和缩小功能