鼠标滚轮放大图片 -JS
原创
©著作权归作者所有:来自51CTO博客作者刘俊涛的博客的原创作品,请联系作者获取转载授权,否则将追究法律责任
//以鼠标位置为中心的图片滚动放大缩小
//以鼠标位置为中心的图片滚动放大缩小
$(document).on("mousewheel",".layui-layer-photos",function(ev){
var oImg = this;
var ev = event || window.event;//返回WheelEvent
//ev.preventDefault();
var delta = ev.detail ? ev.detail > 0 : ev.wheelDelta < 0;
var ratioL = (ev.clientX - oImg.offsetLeft) / oImg.offsetWidth,
ratioT = (ev.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(ev.clientX - (w * ratioL)),
t = Math.round(ev.clientY - (h * ratioT));
$(".layui-layer-photos").css({
width: w, height: h
,left: l, top: t
});
$("#layui-layer-photos").css({width: w, height: h});
$("#layui-layer-photos>img").css({width: w, height: h});
});
文章来源:刘俊涛的博客 欢迎关注公众号、留言、评论,一起学习。
若有帮助到您,欢迎捐赠支持,您的支持是对我坚持最好的肯定(_)