标签：item interval oct hidden ntb height int over utf-8
实现原理：（1）利用绝对定位固定好起始位置；（2）利用遮罩将右轴右侧的部分遮住；（3）让右轴和遮罩同时同速度向右运动！
```html:run
<!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>
```
标签：item interval oct hidden ntb height int over utf-8
原文地址：https://www.cnblogs.com/gushixianqiancheng/p/10967120.html
