jquery图片鼠标拖动效果代码jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。jquery鼠标拖动浮动层放大缩小 所属专题：图片代码\
/*页面载入后*/
window.onload = function() {
var oImg = document.getElementById('oImg');
/*拖拽功能*/
(function() {
addEvent(oImg, 'mousedown', function(ev) {
var oEvent = prEvent(ev),
oParent = oImg.parentNode,
disX = oEvent.clientX - oImg.offsetLeft,
disY = oEvent.clientY - oImg.offsetTop,
startMove = function(ev) {
if (oParent.setCapture) {
oParent.setCapture();
}
var oEvent = ev || window.event,
l = oEvent.clientX - disX,
t = oEvent.clientY - disY;
oImg.style.left = l +'px';
oImg.style.top = t +'px';
oParent.onselectstart = function() {
return false;
}
}, endMove = function(ev) {
if (oParent.releaseCapture) {
oParent.releaseCapture();
}
oParent.onselectstart = null;
removeEvent(oParent, 'mousemove', startMove);
removeEvent(oParent, 'mouseup', endMove);
};
addEvent(oParent, 'mousemove', startMove);
addEvent(oParent, 'mouseup', endMove);
return false;
});
})();
/*以鼠标位置为中心的滑轮放大功能*/
(function() {
addWheelEvent(oImg, function(delta) {
var ratioL = (this.clientX - oImg.offsetLeft) / oImg.offsetWidth,
ratioT = (this.clientY - oImg.offsetTop) / oImg.offsetHeight,
ratioDelta = !delta ? 1 + 0.1 : 1 - 0.1,
w = parseInt(oImg.offsetWidth * ratioDelta),
h = parseInt(oImg.offsetHeight * ratioDelta),
l = Math.round(this.clientX - (w * ratioL)),
t = Math.round(this.clientY - (h * ratioT));
with(oImg.style) {
width = w +'px';
height = h +'px';
left = l +'px';
top = t +'px';
}
});
})();
};
</script>
本站资源仅限于学习研究，严禁从事商业或者非法活动!
源码搜藏网所有源码来自互联网转载与用户上传分享，如果侵犯了您的权益请与我们联系，我们将在24小时内删除！谢谢！
下一篇：js图片左右滚动条切换
图片代码下载排行
-
2019-06-28
-
2015-11-07
-
2015-03-24
-
2016-11-08
-
2015-02-05
-
2015-02-05
-
2015-02-05
-
2015-02-05
最新文章
-
jquery淡出淡入广告图片切换代码是一款带缩略图的jquery幻灯片代码
2022-03-15
-
JQuery全屏3D旋转木马焦点图，带左右箭头，带图片文字说明
2022-03-15
-
2022-03-15
-
JQuery左右拖动切换大小特效是一款响应式的鼠标拖动切换特效
2022-03-15
-
JQuery瀑布流插件Grid-A-Licious是一款简单易用的jQuery插件
2022-03-15
-
-
2019-06-28
-
2016-11-08
热门源码
