蘋果時間表風格滾動鼠標懸停

-2

我想建立一個滑塊像蘋果那樣：http://www.apple.com/30-years/蘋果時間表風格滾動鼠標懸停

我不知道如何在鼠標懸停滾動就像上面的鏈接。我知道我必須減少X的translateX值，但什麼是X？ :)

// scroll animation 
function scrollAnimation(){ 
$('ul').css({ 
'transform' : 'translateX(-' +mouseX+ 'px)' 
}); 
scrollAnimation(); 
}

我想連續滾動圖像，速度取決於鼠標的位置。

這裏是我的全碼：http://jsfiddle.net/M8cnV/light/

我是新來的，所以我很感謝我的代碼任何評論。

來源

2014-02-11 user1452062

這就是我想出了：

http://jsfiddle.net/5nTpS/

我增加了一些新的變量來跟蹤從左邊多遠或右側邊緣的光標，滾動的方向，以及如何快速滾動：

var scrollSpeed = 0; 
var hotEdgeWidth = 200; 
var animationSign = "-";

而且修改你的鼠標移動功能，使得它的作品了，如果光標足夠接近向左或你希望他們在滾動的方向，你需要的圖片滾動容器，權，和怎麼樣快你希望他們滾動：

$(container).mousemove(function(e) { 
    if(e.pageX > $(this).width() - hotEdgeWidth){ 
     scrollSpeed = hotEdgeWidth - ($(this).width() - e.pageX); 
     animationSign = "-"; 
    } 
    else if(e.pageX < hotEdgeWidth){ 
     scrollSpeed = hotEdgeWidth - e.pageX; 
     animationSign = "+"; 
    } 
    else{ 
     scrollSpeed = 0; 
    } 
    scrollAnimation(); 
    }).mouseout(function(e){ 
     scrollSpeed = 0; 
});

然後，更改scrollAnimation使用.animate功能，並添加一個功能齊全，一旦動畫完成後再次調用scrollAnimation功能。如果沒有動畫已經發生以防止反饋循環發生，它只會動畫：

function scrollAnimation(){ 
    if (!$('li').is(':animated')){     
     $("li").animate({ 
      "left": animationSign + "="+scrollSpeed+"px" 
     }, 
     500, 
     function(){ 
      scrollAnimation(); 
     }); 
    } 
}

來源

2014-02-11 17:30:41 ilikeprogramming

蘋果時間表風格滾動鼠標懸停

回答

相關問題