0

我正在努力做到这一点，以便当鼠标悬停在图像上时 div 会滚动，但只能滚动到现在。某处它只是不太工作

$(document).ready(function()
 {
    $('#test').bind('mouseenter', function() 
   {
    var self = $(this);
    var right = parseInt(self.style.left) || 200;               
    this.iid = setInterval(function() 
     {
         if (right <= 400)
         {                     
         right += 200;                         
         }
         else
         {
          right = 400;                         
         }
    self.style.left = right + "px";
     }, 525);
   }).bind('mouseleave', function()
           {
    this.iid && clearInterval(this.iid);
           });

 });​

    #test {
        color:white;
        width: 400px; 
    height: 400px; 
    left: 200px; 
    background-color: #000; 
    position: absolute;
    }

    <div id="test">hover me please</div>​

或这里的小提琴：http: //jsfiddle.net/qjxqC/1/

谢谢你的帮助

4

2 回答 2

1

代替

var self = $(this);

经过

var self = this;

因为style是 DOM 对象的属性，而不是 jQuery 对象，但你这样做：

self.style.left = right + "px";
于 2012-10-21T05:37:29.667 回答
1

首先，不要将 JavaScript 属性 (iid) 附加到 DOM 引用 (this) this.iid 上。这将导致某些浏览器 (IE) 中的内存泄漏。我也建议使用递归超时。

我会使用 setTimeout 进行此操作。鉴于您的限制检查和更容易从您的功能中中断，它提供了更多控制。这是您的代码重做。

$(document).ready(function(){
    var timeout; // keep your timeout reference at a higher scope for example
    $('#test').bind({
        'mouseenter': function(){ 
            var self = $(this);
            var incrementScroll = function() {
                var left = parseInt(self.css("left"));
                if(left <= 400) {
                    self.css("left", "+=200");  // as of jQuery 1.6 you can do this
                    // self.css("left", left+200);
                    timeout = setTimeout(incrementScroll, 525);
                }
            }             
            incrementScroll();
        },
        'mouseleave': function(){
            clearTimeout(timeout);
    }});
});
于 2012-10-21T05:56:15.423 回答