欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生JS实现圣旨卷轴展开效果

程序员文章站 2023-11-16 11:22:40
在其他网站看见类似效果,但代码有400多行且看不懂,我用60多行的代码给予实现。 实现原理:(1)利用绝对定位固定好起始位置;(2)利用遮罩将右轴右侧的部分遮住;(3)让...

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

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

效果图:

原生JS实现圣旨卷轴展开效果

代码如下:

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!