原生射流研究…实现圣旨卷轴展开效果

在其他网站看见类似效果，但代码有400多行且看不懂，我用60多行的代码给予实现。

实现原理：(1)利用绝对定位固定好起始位置；(2)利用遮罩将右轴右侧的部分遮住；(3)让右轴和遮罩同时同速度向右运动！

效果图：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题诏书/title style type=' text/CSS ' * { margin : 0；padd : 0；} #动画{ margin: 40px auto宽度： 495像素；高度： 150像素；相对位置：飞越：隐藏；} #背面{宽度： 495px高度： 150像素；绝对位置：左： 0；top : 10px background : URL(http://cdn。附上。qd funs。com/notes/pics/201703/04/191654 cfqzdfrxann 5551。png)不重复；} # left { position : absolute eleft : 0；} # right { position : absolute eleft : 16px } # mark { position : absolute eleft : 44px }/style/headdydiv id=' animate ' div id=' back ' img src=' http :http://cdn。附上。qd funs。com/notes/pics/201703/04/191214 ug6h 47d 81 jyyy6vh。png '/div id=' left ' img src=' http :http://cdn。附上。qd funs。com/notes/pics/22012 var right=document。getelementbyid(' right ')；var mark=文档。getelementbyid(' mark ')；var timer=setInterval(function(){ var right 1=get computed style(右))。向左；var mark1=getComputedStyle(标记)。向左；if(parseFloat(右1)=447){右1=447 ' pxclearInterval(计时器);}对。风格。left=(parseFloat(右1)10)“px”；马克。风格。left=(parseFloat(mark1)10)“px”；},100)/脚本/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！