这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了原生 JS 实现诏书卷轴展开效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
在其他网站看见类似效果,但代码有 400 多行且看不懂,我用 60 多行的代码给予实现。
实现原理:(1)利用绝对定位固定好起始位置;(2)利用遮罩将右轴右侧的部分遮住;(3)让右轴和遮罩同时同速度向右运动!
效果图:
代码如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 诏书
- </title>
- <style type="text/CSS">
- * { margin: 0; padding: 0; } #animate { margin: 40px auto; width: 495px;
- height: 150px; position: relative; overflow: hidden; } #back { width: 495px;
- height: 150px; position: absolute; left: 0; top: 10px; background: url(http://cdn.attach.qdfuns.com/notes/pics/201703/04/191654mcfqzdfrxann5551.png)
- no-repeat; } #left { position: absolute; left: 0; } #right { position:
- absolute; left: 16px; } #mark { position: absolute; left: 44px; }
- </style>
- </head>
- <body>
- <div id="animate">
- <div id="back">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201703/04/191214ug6h47d81jyfy6vh.png"
- />
- </div>
- <div id="left">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201703/04/191236gldigxmxg2zlh9s7.png"
- />
- </div>
- <div id="right">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201703/04/191244uhavf49l1zw440cv.png"
- />
- </div>
- <div id="mark">
- <img src="http://cdn.attach.qdfuns.com/notes/pics/201703/04/191254kfbz2tjupc1jigbb.png"
- />
- </div>
- </div>
- </body>
- <script>
- var animate = document.getElementById("animate");
- var right = document.getElementById("right");
- var mark = document.getElementById("mark");
- var timer = setInterval(function() {
- var right1 = getComputedStyle(right).left;
- var mark1 = getComputedStyle(mark).left;
- if (parseFloat(right1) >= 447) {
- right1 = 447 + "px";
- clearInterval(timer);
- }
- right.style.left = (parseFloat(right1) + 10) + "px";
- mark.style.left = (parseFloat(mark1) + 10) + "px";
- },
- 100)
- </script>
- </html>
来源: http://www.phperz.com/article/17/0717/327037.html