jquery - Wobbly jQuery 缩略图滚动器 CSS

Question

我正在开发缩略图滚动器：https ://dl.dropbox.com/u/2241201/jquery-thumbnail-scroll/index.html

如果将鼠标悬停在缩略图上，它会从左向右摆动。

我觉得我已经尝试了所有方法，但无法防止图像缩略图看起来不稳定。

我认为这是一个 CSS 问题，因为默认滚动条较小，并且没有摆动。

Answer 1

这不是 Css 问题，而是更改.jTscroller'left属性的 JavaScript 问题。

代码是

$this.mousemove(function(e){
    mouseCoords=(e.pageX-pos[1]);
    mouseCoordsY=(e.pageY-pos[0]);
    var mousePercentX=mouseCoords/$this.width(); if(mousePercentX>1){mousePercentX=1;}
    var mousePercentY=mouseCoordsY/$this.height(); if(mousePercentY>1){mousePercentY=1;}
    var destX=Math.round(-((totalWidth-$this.width())*(mousePercentX)));
    var destY=Math.round(-((totalHeight-$this.height())*(mousePercentY)));
    $scroller.stop(true,false).animate({left:destX,top:destY},options.scrollEasingAmount,options.scrollEasing); 
});

采用

$this.mousemove(function(e){
    var obj=new Object();
    if(options.scrollerOrientation=="horizontal"){
        mouseCoords=(e.pageX-pos[1]);
        var mousePercentX=mouseCoords/$this.width(); if(mousePercentX>1){mousePercentX=1;}
        var destX=Math.round(-((totalWidth-$this.width())*(mousePercentX)));
        obj.left=destX;
    }else{
        mouseCoordsY=(e.pageY-pos[0]);
        var mousePercentY=mouseCoordsY/$this.height(); if(mousePercentY>1){mousePercentY=1;}
        var destY=Math.round(-((totalHeight-$this.height())*(mousePercentY)));
        obj.top=destY;
    }
    $scroller.stop(true,false).animate(obj,options.scrollEasingAmount,options.scrollEasing); 
});

在这里看到它：http: //jsfiddle.net/rUCXg/2/