原生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 miscellanea -display data real time, using window.status
Jan 09 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
微信小程序学习之自定义滚动弹窗
Dec 20 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中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
基于PHP生成静态页的实现方法
2013/05/10 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
php生成短网址示例
2014/05/05 PHP
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
php简单日历函数
2015/10/28 PHP
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
Dojo 学习要点
2010/09/03 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
2019/08/17 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
基于Pytorch SSD模型分析
2020/02/18 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
伦敦剧院门票:London Theatre Direct
2018/11/21 全球购物
行政文秘岗位职责范本
2014/02/10 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
立春观后感
2015/06/18 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫