原生JS实现圣旨卷轴展开效果
更新时间：2017年03月06日 10:21:02 作者：前端工程师_钱成
本文主要介绍了原生JS实现诏书卷轴展开效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧
在其他网站看见类似效果，但代码有400多行且看不懂，我用60多行的代码给予实现。
实现原理：（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: 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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了微信小程序中button去除默认的边框的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-08-08
JavaScript的Number对象的toString()方法
toString()方法可以把Number对象转换成字符串，并返回此字符串，本文给大家介绍JavaScript的Number对象的toString()方法，对javascript对象方法相关知识感兴趣的朋友一起学习吧2015-12-12
这篇文章主要为大家详细介绍了原生JS实现音乐播放器，支持循环、随机播放，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了基于javascript实现贪吃蛇小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
在这个数字化的时代,网页端的音频处理能力已经成为一个非常热门的需求,本文将详细介绍如何利用 getUserMedia 和 MediaRecorder 这两个强大的 API,实现网页端音频的录制、处理和播放等功能,需要的朋友可以参考下2024-07-07
这篇文章主要给大家介绍了关于js中复选框的取值及赋值的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
本文主要介绍了fiv.js实现flv文件blob流实时播放的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
下面小编就为大家带来一篇仿百度换肤功能的简单实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
ES6提供了大量新的好的东西，在过去的一年内，浏览器提供商做了大量的辛勤工作将新的语言特性更新到他们的浏览器中。尽管有重大的更新，很多小的语言更新另我眼前一亮，下面这篇文章主要介绍了关于ES6的六个小特性,需要的朋友可以参考下。2017-02-02
这篇文章主要介绍了JavaScript实现的数字与字符串转换功能,涉及javascript数字、字符串等运算与转换相关操作技巧,需要的朋友可以参考下2017-08-08
最新评论