超赞：用Jquery实现鼠标滚轮来控制input框的值

本文转载于:猿2048网站▶超赞：用Jquery实现鼠标滚轮来控制input框的值

过去，我们已经讨论加入+ / – 按钮来实现文本框值的改变，来实现交互的（更容易在某些情况下比打字）。而用滚轮来实现这个效果，不是我的想法，是读者用电子邮件的形式告诉我的。

如图所示：只要鼠标经过输入框，您可以使用鼠标滚轮的数值递增向上和向下。

Hitesh（应该是读者的名字）想用JQuery来实现这个效果。后来他找到了滚轮事件，这是非常好的事情，简化处理内置插件。只是为了好玩，演示将留在它的两个版本。

HTML

HTML代码很简单，只需要一个input和label

XML/HTML代码

1. <div>  
2.     <label for=“how-many”>How Many? </label>  
3.     <input type=“text” id=“how-many” class=“wheelable” value=“1″ name=“how-many” />  
4. </div>  

JQuery

如果你想查看的非插件版本，只要下载以下文件。我们将在这里介绍使用插件，这样更加简洁。以下就是要使用到的JavaScript文件：

XML/HTML代码

1. <script type=‘text/javascript’ src=‘http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js’></script>  
2. <script type=“text/javascript” src=“js/jquery.mousewheel.min.js”></script>  
3. <script type=“text/javascript” src=“js/increment.js”></script>  

当DOM准备好了，我们将结合添加新的“滚轮”事件。如果它是一个“向上”滚轮滚动，我们将增加一个向上的值，如果“下”，将减1（除非它已经零）。

图像的第一行追加是为了让非JavaScript的用户不会看到该图形，显示鼠标滚轮滚动性。

扫描二维码关注公众号，回复： 7665700 查看本文章

JavaScript代码

1. $(function() {   
2.   
3.     $(“div”).append(‘<img src=”images/mousewheelupdown.png” alt=”Scroll up or down with mousewheel” />’);   
4.   
5.     $(“#how-many”).bind(“mousewheel”, function(event, delta) {   
6.         if (delta > 0) {   
7.             this.value = parseInt(this.value) + 1;   
8.         } else {   
9.             if (parseInt(this.value) > 0) {   
10.                 this.value = parseInt(this.value) - 1;   
11.             }   
12.         }   
13.         return false;   
14.      });   
15.   
16. });  

怎么输入非数字？

你必须要处理的需要。现在你有“滚轮”，如果该插件提供的功能，当你写的事件触发可以是任何东西。在演示我有一个文本输入通过不同种类的鲸鱼名单（在我看了就是一个模拟的select）

JavaScript代码

1. $(“#whale”).bind(“mousewheel”, function(event, delta) {   
2.     if (this.value == “Blue”) {   
3.         this.value = “Sperm”;   
4.     }   
5.     else if (this.value == “Sperm”) {   
6.         this.value = “Orca”;   
7.     }   
8.     else if (this.value == “Orca”) {   
9.         this.value = “Humpback”;   
10.     }   
11.     else if (this.value == “Humpback”) {   
12.         this.value = “Blue”;   
13.     }   
14.     return false;   
15.  }); 

This is pure progressive enhancement. Without JavaScript the inputs are still inputs which behave just as any other input would.（这一句不解，应该是心得体会之类的，比较抽象，翻译不上来~）

更多专业前端知识，请上 【猿2048】www.mk2048.com