Posted in Javascript onOctober 27, 2011
今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下,并加上注意的注释项:
$(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;//去掉浏览器默认滚动事件 //e.stopPropagation(); return false; }) }else{ $(this).bind("DOMMouseScroll",function(event){ if(event.detail<0) resizeImg(this,false); else resizeImg(this,true); event.preventDefault()//去掉浏览器默认滚动事件 //event.stopPropagation(); }) } }); function resizeImg(node,isSmall){ if(!isSmall){ $(node).height($(node).height()*1.2); }else { $(node).height($(node).height()*0.8); } } });
本文的demo请点击这里:滚动鼠标放大缩小图片效果
基于jquery的滚动鼠标放大缩小图片效果
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@