工作需要,写了个简单的图片拖拽和缩放功能,有需要的可以参考一下
拖拽:(拖拽目标需要做定位,并设置draggable=“false”)
popupDrag: function(ev){
var ev = ev || event;
var obj = document.getElementById('img_li');
var disX = ev.clientX - obj.offsetLeft
var disY = ev.clientY - obj.offsetTop;
if ( obj.setCapture ) {
obj.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
$(obj).css({
'left' : ev.clientX - disX + 'px',
'top' : ev.clientY - disY + 'px',
'right' : 'auto',
'bottom' : 'auto'
})
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
//释放全局捕获 releaseCapture();
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false;
};
缩放:(要用到mousewheel鼠标滚轮事件)
zoomimg: function(e){
var ev = e || event;
var obj = document.getElementById('img_li');
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
var changeZoom = 1;
var scaleS = 0;
if (e.detail) {
changeZoom += -(e.detail / 260);
} else if (e.wheelDelta) {
changeZoom += (e.wheelDelta / 880);
}
if (changeZoom < 0.8) { // 最小缩放 0.7
changeZoom = 0.8;
}
changeZoom = parseInt(changeZoom * 10) / 10;
scaleS *= changeZoom;
$('#img_li').css({
'transform' : 'scale('+ scaleS +')'
})
};
版权声明:本文为weixin_42380440原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。