原生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 相关文章推荐
javascript结合ajax读取txt文件内容
Dec 05 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
jQuery解析XML 详解及方法总结
Sep 28 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
解决循环中setTimeout执行顺序的问题
Jun 20 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
全网小程序接口请求封装实例代码
Nov 06 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
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
记录Yii2框架开发微信公众号遇到的问题及解决方法
2018/07/20 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
在视频前插入广告
2006/11/20 Javascript
XRegExp 0.2: Now With Named Capture
2007/11/30 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
JavaScript对数字的判断与处理实例分析
2015/02/02 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
解决vue页面刷新或者后退参数丢失的问题
2018/03/13 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
python实现问号表达式(?)的方法
2013/11/27 Python
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
详解Python3中yield生成器的用法
2015/08/20 Python
python装饰器初探(推荐)
2016/07/21 Python
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
selenium+Chrome滑动验证码破解二(某某网站)
2019/12/17 Python
Tensorflow的常用矩阵生成方式
2020/01/04 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
大学生求职自我评价
2014/01/16 职场文书
银行求职信怎么写
2014/05/26 职场文书
班级光棍节联谊会策划书
2014/10/10 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
2015年挂职干部工作总结
2015/05/14 职场文书
MySQL中InnoDB存储引擎的锁的基本使用教程
2021/05/26 MySQL
Java基于Dijkstra算法实现校园导游程序
2022/03/17 Java/Android
通过feDisplacementMap和feImage实现水波特效
2022/04/24 HTML / CSS