jQuery水平滚动显示

我使用jQuery制作水平滚动条。我有工作用jQuery水平滚动显示

var wrapper = $('#wrapper'), 
    content = $('#scroll-content'); 


wrapper.bind('mousemove', function(e){ 

    var wrapper_width = wrapper.width(), 
     content_width = content.width(); 
     //wrapper and content width 

    var tmp = e.pageX * (content.outerWidth() - wrapper.outerWidth())/wrapper.outerWidth(); 
    //calculate new left margin 

    content.css({ 'margin-left': '-'+tmp+'px' }); 
    //set margin according 

    /*content.animate({ 
     'margin-left': '-'+tmp+'px' 
    }, 30, 'easeOutSine');*/ 
});

每个鼠标移动事件中，我计算新的左边距，滑块跨越了屏幕的宽度为100％以下。

这有效，但我有两个问题。在每个鼠标移动事件中调用计算似乎都是不好的做法，因为有数百个事件。有没有更好的方法，也许使用计时器？

另一个问题是，当用户第一次将光标悬停在其上时，我尝试使用动画，以便滑动条滑动到正确的位置，但似乎不起作用。（在底部注释）

这些问题的任何帮助将是伟大的。由于

来源

2011-02-23 michael

什么是理想的动画呢？一些事件不断滚动或滚动？ – 2011-02-23 22:13:35

而不是跳到正确的位置，我只是想要它滚动到正确的位置，我在这里创建了一个小提琴http://jsfiddle.net/letsgojuno/RkbP6/ – michael 2011-02-23 23:59:45

您可以使用Ben Alman's Throttle Debounce plugin

然后做这样的事情：

$(document).ready(function() { 

    var wrapper = $('#wrapper'), 
     content = $('#scroll-content'); 

    wrapper.bind('mouseenter mousemove', $.throttle(200, mousemove)); 

    function mousemove(e) { 
     var wrapper_width = wrapper.outerWidth(), 
      content_width = content.outerWidth(); 
     //calculate new left margin 
     var tmp = e.pageX * (content_width - wrapper_width)/wrapper_width; 

     content.stop().animate({ 
      'margin-left': '-' + tmp + 'px' 
     }, 'fast', 'easeOutSine'); 
    } 
});

例子：http://jsfiddle.net/petersendidit/RkbP6/1/

来源

2011-02-24 01:42:11 PetersenDidIt

真棒，这就是我正在寻找的，我知道我之前看过一个节流插件，就是不记得在哪里。感谢彼得森 – michael 2011-02-24 12:49:12

我知道我已经看到在节流方面类似的东西。 John Resig发布了一个关于tweet无限滚动问题的博客。我在以下使用他的解决方案。

这里是任何感兴趣的人的博客文章。

http://ejohn.org/blog/learning-from-twitter/

$(document).ready(function() { 

    var wrapper = $('#wrapper'), 
     content = $('#scroll-content'), 
     did_move = false, 
     g_event; 

    wrapper.bind('mouseenter mousemove', function(e) { 
     did_move = true; 
     g_event = e; 
    }); 

    setInterval(function() { 
     if (did_move) { 
      did_move = false; 
      //reset move bool 
     } 

     var wrapper_width = wrapper.outerWidth(), 
      content_width = content.outerWidth(); 
      //update wrapper and content widths 

     var tmp = g_event.pageX * (content_width - wrapper_width)/wrapper_width; 
     //recalculate margin-left 

     content.stop().animate({ 
      'margin-left': '-' + tmp + 'px' 
     }, 'fast', 'easeOutSine'); 
     //animate into place. 

    }, 150); 
});

来源

2011-02-24 13:11:34 michael

jQuery水平滚动显示

回答

相关问题