使用Jquery鼠标点击图片,划动鼠标滚轮放大缩小图片。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" ><head><title>鼠标滚轮放大图片</title><style type="text/css">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} </style><script type="text/javascript" src="JS/jquery-1.5.1.min.js"></script><script type="text/javascript">$(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);elseresizeImg(this,true);window.event.returnValue=false;return false;})}else{$(this).bind("DOMMouseScroll",function(event){if(event.detail<0)resizeImg(this,false);elseresizeImg(this,true);event.preventDefault();})}});function resizeImg(node,isSmall){if(!isSmall){$(node).height($(node).height()*1.2);}else{$(node).height($(node).height()*0.8);}}});</script></head><body><div class="body"><img src="Images/P_022.jpg" alt="点击图片,划动鼠标滚轮放大缩小图片" /><img src="Images/P_034.jpg" alt="点击图片,划动鼠标滚轮放大缩小图片" /></div></body></html>
运行效果图:
原图:
划动滚轮后的图片: