CSS3或JavaScript滑塊如何 - 他們做？

Question

我正在一個新的網站上工作，想弄清楚蘋果和IBM如何在他們的網站上做一個滑塊。

實例： http://www.ibm.com/us/en/sandbox/ver2/和 http://www.apple.com/imac/

通知方式的文本和圖像在相反方向上滑動。看起來他們使用CSS3來完成它，但我無法弄清楚他們如何獲得下面的按鈕的按鈕，而無需更換類。

任何人都可以提供一些見解？

Answer 1

特別看着蘋果滑塊有一些事情正在進行。

他們使用JS鉤入click事件，當他們這樣做時，他們正在改變<ul>上的一個屬性，這反過來改變了CSS，它使用CSS3轉換提供動畫。

所以，在看看到代碼：

下面是HTML代碼的片段。您可以看到exited和entered屬性。這是當需要一個新的部分（通過的onclick）

<ul class="ul-slider" page="1" style="width: 970px; margin-top: 0px; margin-right: 5px; margin-bottom: 0px; margin-left: 5px; " exited="previous"> 
    <li class="pb-macbook" exited="previous">...</li> 
    <li class="pb-macbookpro" exited="previous">...</li> 
    ... 
</ul> 
... 
<ul class="ul-slider" page="3" style="width: 930px; margin-top: 0px; margin-right: 25px; margin-bottom: 0px; margin-left: 25px; " entered="next"> 
    <li class="pb-keyboard started" entered="next">...</li> 
    <li class="pb-magicmouse started" entered="next">...</li> 
    <li class="pb-magictrackpad started" entered="next">...</li> 
    ... 
</ul> 

然後，尋找到了CSS（http://images.apple.com/global/styles/productbrowser.css），我們看到的是提供了一個小片斷許多CSS3 transition/transforms properties and styles

使用JavaScript的變化，你可以看到不同的entered或exited屬性值如何影響轉換，而轉換則由轉換生成動畫。

.productbrowser ul.exited , 
.productbrowser ul[exited] { display:none; } 
.productbrowser li[exited] , 
.productbrowser li[toenter] { -webkit-animation-name:none; -webkit-animation-duration:0; 

.productbrowser li[exited="next"] , 
.productbrowser li[toenter="next"], 
.productbrowser li[enter="next"] { -webkit-transform:translate3d(3000px, 0, 0); } 

他們縮小了JS，所以我不能真正告訴你這是如何工作的，但它並不太複雜。

我希望這是有道理的，並有幫助:)

Answer 2

在互聯網上有很多JQuery JavaScripts，所以你可以使用它來實現這種類型的滑塊。而雅JQuery有很多。

你也可以使用JavaScript文件獲取這種類型的東西。

您可以訪問Menus & Navigation的動力驅動器瞭解更多信息。你也可以得到你可以找到你正在尋找的東西的來源。