单击按钮时将焦点设置在滚动上

时间:2010-05-25 22:33:27

标签: javascript mootools

window.addEvent('domready',function(){           var totIncrement = 0;           var increment = 560;           var maxRightIncrement = increment *( - 6);           var fx = new Fx.Style('slider-list','margin-left',{                     持续时间:1000,                     转换:Fx.Transitions.Back.easeInOut,                     等待:是的            });            // -------------------------------------           //按钮“上一个”的事件           $( '以前')。ADDEVENTS({               'click':function(event){               如果(totIncrementmaxRightIncrement){                      totIncrement = totIncrement-increment;                     fx.stop()                     fx.start(totIncrement);                 }               }           })     });         

在mootools v1.1

它在我的html页面底部创建了一个滚动函数。 但是当我点击下一个按钮时,页面的焦点移动到页面顶部。我怎么把它放在卷轴上?

这是html片段:

<h3>Our Pastas</h3>

<div id="slider-buttons">
<a href="#" id="previous">Previous</a> | <a href="#" id="next">Next</a&gt;
</div>

<div id="slider-stage">
<ul id="slider-list">

<li class="list_item">

<div id="thumbnail"><a href="xxx/product-catalog/pasta/long-pasta-in-brown-bags/bucatini"><img src="xxx/images/stories/products/_thumb1/bucatini.gif"></a></div><h4><a href="xxx/product-catalog/pasta/long-pasta-in-brown-bags/bucatini">Rustichella d'Abruzzo Bucatini</a></h4>
</li>


<li class="list_item">
<div id="thumbnail"><a href="xxx/product-catalog/pasta/pasta-in-trays/calamarata"><img src="xxx/images/stories/products/_thumb1/calamarata.jpg"></a></div><h4><a href="xxx/product-catalog/pasta/pasta-in-trays/calamarata">Rustichella d'Abruzzo Calamarata</a></h4>
</li>


<li class="list_item">
<div id="thumbnail"><a href="xxx/product-catalog/pasta/pasta-in-trays/cannolicchi"><img src="xxx/images/stories/products/_thumb1/cannolicchi.jpg"></a></div><h4><a href="xxx/product-catalog/pasta/pasta-in-trays/cannolicchi">Rustichella d'Abruzzo Cannolicchi</a></h4>
</li>


</ul></div>

1 个答案:

答案 0 :(得分:2)

这是mootools 1.11,修改你的下一个和上一个函数如下:

  $('next').addEvents({ 
      'click' : function(event){ 
         // add this to stop the default click event.
         new Event(event).stop();

         // continue as usual.
         if(totIncrement>maxRightIncrement){
             totIncrement = totIncrement-increment;
            fx.stop()
            fx.start(totIncrement);
        }
      }               
  });

在mootools 1.2+中,您只需event.stop();event.preventDefault();