Question

我正在开发一个新网站，想知道Apple和IBM如何在他们的网站上做滑块。

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

注意文本和图像以相反方向滑动的方式。看起来他们用CSS3做了，但是我无法弄清楚他们如何获得下面按钮的onclick，无需交换课程就可以工作。

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

Answer 1

特别关注Apple滑块，有很多事情要发生。

他们正在使用JS来挂钩click事件，当他们这样做时，他们正在更改<ul>上的属性，这反过来会改变CSS，使用CSS3过渡提供动画。

所以看看代码：

以下是HTML代码的片段。您可以看到exited和entered属性。这些是在需要新部分时使用javascript进行更改（通过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

提供了一个小代码段，您可以看到不同的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了解详情。你也可以找到你可以找到你正在寻找的东西的来源。

CSS3或JavaScript Slider他们怎么做？

2 个答案: