发布于 2017-07-17 17:25:46 | 10 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


本文主要介绍了原生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>

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



相关阅读 :
原生JS实现圣旨卷轴展开效果
原生JS实现拖拽图片效果
原生Js实现简易烟花爆炸效果的方法
原生js实现可拖拽效果
原生JS实现图片翻书效果
原生js实现弹出层效果
原生js实现新闻列表展开/收起全文功能
原生js实现返回顶部缓冲效果
原生JS实现图片轮播效果
原生JS实现九宫格抽奖效果
原生js实现图片层叠轮播切换效果
原生js实现类似弹窗抖动效果
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务