html鼠标滚动放大图片,Jquery鼠标滚轮放大缩小图片

使用Jquery鼠标点击图片,划动鼠标滚轮放大缩小图片。

鼠标滚轮放大图片

img{

border:2px solid #000000;

margin:10px;

}

body{

font-family:Verdana,Arial,sans-serif;

font-size:80%;

margin:0;

padding:0;

}

div.body{margin:10pt}

$(function(){

$(".body img").each(function(){

if($.browser.msie){

$(this).bind("mousewheel",function(e){

var e=e||event,v=e.wheelDelta||e.detail;

if(v>0)

resizeImg(this,false);

else

resizeImg(this,true);

window.event.returnValue=false;

return false;

})

}else{

$(this).bind("DOMMouseScroll",function(event){

if(event.detail<0)

resizeImg(this,false);

else

resizeImg(this,true);

event.preventDefault();

})

}

});

function resizeImg(node,isSmall){

if(!isSmall){

$(node).height($(node).height()*1.2);

}else{

$(node).height($(node).height()*0.8);

}

}

});

点击图片,划动鼠标滚轮放大缩小图片

点击图片,划动鼠标滚轮放大缩小图片

运行效果图:

原图:

0818b9ca8b590ca3270a3433284dd417.png

划动滚轮后的图片:

0818b9ca8b590ca3270a3433284dd417.png

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值