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>
js图片鼠标拖动效果代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/tupian/7715.html
源码搜藏承诺：本站所有资源无病毒，无弹窗，无干扰链接！
下一篇：js图片左右滚动条切换
VM Carousel响应式图片切换代码
jQuery鼠标悬停横向大图展示特效
jQuery带聚焦效果图片切换代码
jQuery仿Facebook图片画廊代码
jQuery爱奇艺广告图片切换代码