JQ鼠标滚动的两个小应用

JQ插件jquery.mousewheel.js

1.放大缩小图片：

 1 <img class="logo" src="http://img03.taobaocdn.com/tps/i3/T1ogqgXfXeXXXXXXXX-168-42.png" alt="" />
 2 <script> 
 3 $(function(){
 4     $(".logo").mousewheel(function(objEvent, intDelta){
 5         var o = $(".logo").width();
 6         if(intDelta>0){
 7             o = o - 10;
 8         }else{
 9             o = o + 10;
10         }
11         $(".logo").width(o);
12     });
13 })
14 </script>

 

2.鼠标滚动改变input值

 1 <input type="text" id="txt1" value="0" class="txt"/> 
 2 <input type="text" id="txt2" value="10" class="txt"/> 
 3 <input type="text" id="txt3" value="-10" class="txt"/>
 4 <input type="text" id="txt4" value="10.4" class="txt"/>
 5 <script> 
 6 $(function(){
 7   $(".txt").mousewheel(function(objEvent, intDelta){
 8     ScrollText(this,intDelta);//intDelta代表鼠标滚动，向上时，intDelta大于0。
 9   });
10 })
11  
12 function ScrollText(oTxt,arg){
13   oTxt.focus();
14   var _value=parseInt(oTxt.value);
15   if(arg>0){
16     _value++;
17   }else{
18     _value--;
19   }
20   oTxt.value=_value;
21   oTxt.select();//选取效果
22 }
23 </script>

 

posted @ 2012-07-03 13:56  猫200  阅读(551)  评论(0)  编辑  收藏  举报