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


Posted in Javascript onMarch 06, 2017

在其他网站看见类似效果,但代码有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>

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

Javascript 相关文章推荐
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
简述jQuery ajax的执行顺序
Jan 05 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
JS Canvas接口和动画效果大全
Apr 29 Javascript
js中setTimeout的妙用--防止循环超时
Mar 06 #Javascript
Bootstrap表单简单实现代码
Mar 06 #Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 #Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
Mar 06 #Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 #Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 #Javascript
Bootstrap导航中表单简单实现代码
Mar 06 #Javascript
You might like
用PHPdig打造属于你自己的Google[图文教程]
2007/02/14 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
destoon常用的安全设置概述
2014/06/21 PHP
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
node.js中的fs.readlinkSync方法使用说明
2014/12/17 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
2016/12/21 Javascript
js实现华丽的九九乘法表效果
2017/03/29 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python输出9*9乘法表的方法
2015/05/25 Python
Python HTML解析器BeautifulSoup用法实例详解【爬虫解析器】
2019/04/05 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
python写一个随机点名软件的实例
2019/11/28 Python
Python中顺序表原理与实现方法详解
2019/12/03 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
某公司C#程序员面试题笔试题
2014/05/26 面试题
夜不归宿检讨书
2014/02/25 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
厨房领班竞聘演讲稿
2014/04/23 职场文书
应聘英语教师求职信
2014/04/24 职场文书
爱国主义演讲稿
2014/05/07 职场文书
共青团员自我评价范文
2014/09/14 职场文书
2015年公司新年寄语
2014/12/08 职场文书
瘦西湖导游词
2015/02/03 职场文书
文员岗位职责
2015/02/04 职场文书
利用JavaScript写一个简单计算器
2021/11/27 Javascript