译文如下：
过去，我们已经讨论加入+ / - 按钮来实现文本框值的改变，来实现交互的（更容易在某些情况下比打字）。而用滚轮来实现这个效果，不是我的想法，是读者用电子邮件的形式告诉我的。
如图所示：只要鼠标经过输入框，您可以使用鼠标滚轮的数值递增向上和向下。
Hitesh（应该是读者的名字）想用JQuery来实现这个效果。后来他找到了滚轮事件，这是非常好的事情，简化处理内置插件。只是为了好玩，演示将留在它的两个版本。
HTML
HTML代码很简单，只需要一个input和label
XML/HTML代码
- <div>
- <label for="how-many">How Many? </label>
- <input type="text" id="how-many" class="wheelable" value="1" name="how-many" />
- </div>
JQuery
如果你想查看的非插件版本，只要下载以下文件。我们将在这里介绍使用插件，这样更加简洁。以下就是要使用到的JavaScript文件：
XML/HTML代码
- <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
- <script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
- <script type="text/javascript" src="js/increment.js"></script>
当DOM准备好了，我们将结合添加新的“滚轮”事件。如果它是一个“向上”滚轮滚动，我们将增加一个向上的值，如果“下”，将减1（除非它已经零）。
图像的第一行追加是为了让非JavaScript的用户不会看到该图形，显示鼠标滚轮滚动性。
JavaScript代码
- $(function() {
- $("div").append('<img src="images/mousewheelupdown.png" alt="Scroll up or down with mousewheel" />');
- $("#how-many").bind("mousewheel", function(event, delta) {
- if (delta > 0) {
- this.value = parseInt(this.value) + 1;
- } else {
- if (parseInt(this.value) > 0) {
- this.value = parseInt(this.value) - 1;
- }
- }
- return false;
- });
- });
怎么输入非数字？
你必须要处理的需要。现在你有“滚轮”，如果该插件提供的功能，当你写的事件触发可以是任何东西。在演示我有一个文本输入通过不同种类的鲸鱼名单（在我看了就是一个模拟的select）
JavaScript代码
- $("#whale").bind("mousewheel", function(event, delta) {
- if (this.value == "Blue") {
- this.value = "Sperm";
- }
- else if (this.value == "Sperm") {
- this.value = "Orca";
- }
- else if (this.value == "Orca") {
- this.value = "Humpback";
- }
- else if (this.value == "Humpback") {
- this.value = "Blue";
- }
- return false;
- });
This is pure progressive enhancement. Without JavaScript the inputs are still inputs which behave just as any other input would.（这一句不解，应该是心得体会之类的，比较抽象，翻译不上来~）
]]>
