83JS原生：圣旨卷轴展开效果
Posted gushixianqiancheng
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了83JS原生：圣旨卷轴展开效果相关的知识，希望对你有一定的参考价值。
实现原理：（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>
```
以上是关于83JS原生：圣旨卷轴展开效果的主要内容，如果未能解决你的问题，请参考以下文章