原生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 相关文章推荐
基于Jquery的简单图片切换效果
Jan 06 Javascript
如何用ajax来创建一个XMLHttpRequest对象
Dec 10 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
Jul 07 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
js自定义input文件上传样式
Oct 26 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
微信小程序swiper使用网络图片不显示问题解决
Dec 13 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
php curl_init函数用法
2014/01/31 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
JS操作数据库的实例代码
2013/10/17 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
简单学习vue指令directive
2016/11/03 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
在Python中使用dict和set方法的教程
2015/04/27 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python定时器实例代码
2017/11/01 Python
Python命令行解析模块详解
2018/02/01 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
Python文件操作方法详解
2020/02/09 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
小学课外活动总结
2014/07/09 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
教师信息技术学习心得体会
2016/01/21 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL