当前位置：文江博客话题详情

CSS3 或 JavaScript 滑块他们是怎么做到的？

发布于 2024-11-05 07:57:00 字数 362 浏览 0 评论 0原文

我正在开发一个新网站，想了解 Apple 和 IBM 如何在他们的网站上制作滑块。

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

注意文本和图像反向滑动的方式方向。看来他们是用 CSS3 来做的，但我不知道他们如何获得下面按钮的 onclick，在不交换类的情况下工作。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水晶透心 2024-11-12 07:57:00

具体来说，看看苹果的滑块，有几件事发生了。

他们使用 JS 来挂钩点击事件，当他们这样做时，他们正在更改

看一下代码：

这是 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 转换/转换属性和样式

提供了一个小片段，您可以看到不同的 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，所以我无法真正向您展示它是如何工作的，但它并不太复杂。

我希望这是有道理的并且有帮助:)

Specifically looking at the Apple slider there is a couple of things going on.

They are using JS to hook into the click event and when they do that, they are changing an attribute on the <ul>, this in-turn changes the CSS, which, using CSS3 transitions, provides the animation.

So having a look into the code:

Here is a snippet of the HTML code. You can see the exited and entered attributes. These are changes using javascript when a new section is required (via the 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>

Then, looking into the CSS (http://images.apple.com/global/styles/productbrowser.css), we see a number of CSS3 transition/transforms properties and styles

a small snippet is provided, you can see how the different entered or exited attribute values effect the transforms, which in turn are animated by the transitions.

.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); }

They minified the JS so I can't really show you how thats working, but it's not too complex.

I hope this make sense and is helpful :)

回复收藏 0 原文