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);

}

}

});

运行效果图：

原图：

划动滚轮后的图片：