实现原理:(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: 1100px;
- height: 500px;
- position: relative;
- overflow: hidden;
- }
- #back {
- width: 1100px;
- height: 500px;
- position: absolute;
- left: 40px;
- top: 95px;
- }
- #leftAxis {
- position: absolute;
- left: 0;
- }
- #rightAxis {
- position: absolute;
- left: 16px;
- }
- #rightWhiteMark {
- position: absolute;
- left: 70px;
- top:95px;
- }
- </style>
- </head>
- <body>
- <div id="animate">
- <div id="back"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/09/145027pf0jh29z4nhlljr5.png"/></div>
- <div id="leftAxis"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/09/145336cd8g5iq7r78qsk8z.png"/></div>
- <div id="rightWhiteMark"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/26/193935vzzlvazlrkgcxxv6.png"/></div>
- <div id="rightAxis"><img src="https://cdn.files.qdfuns.com/article/content/picture/201806/09/145336cd8g5iq7r78qsk8z.png"/></div>
- </div>
- </body>
- <script>
- var animate=document.getElementById("animate");
- var rightAxis = document.getElementById("rightAxis");
- var rightWhiteMark = document.getElementById("rightWhiteMark");
- var timer = setInterval(function () {
- var rightAxisLeft=getComputedStyle(rightAxis).left;
- var rightWhiteMarkLeft=getComputedStyle(rightWhiteMark).left;
- if(parseFloat(rightAxisLeft)>=923){
- rightAxisLeft=923+"px";
- clearInterval(timer);
- }
- rightAxis.style.left=(parseFloat(rightAxisLeft)+10)+"px";
- rightWhiteMark.style.left=(parseFloat(rightWhiteMarkLeft)+10)+"px";
- }, 20)
- </script>
- </html>
来源: http://www.qdfuns.com/article/40901/aa66376f2593ddcb16d2e5d1bfdafc37.html