当前位置: 澳门新濠3559 > 服务器运维 > 正文

它们的不同点在于setTimeout只执行一次指定的函数

时间:2019-12-08 19:30来源:服务器运维
首先,无缝滚动的第一个重点就是——动。关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识。 实现图片的无缝滚动就是要让你的图片集在一定时间里

首先,无缝滚动的第一个重点就是——动。关于怎么让页面的元素节点动起来,这就得学明白关于JavaScript中定时器的相关知识。

  实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间。

很多朋友在做特效网页的时候需要用到雪花飘落的效果,我们这里给大家整理了分别用JS还有JQuery两种代码实现这个效果的方式。

JS中的创建定时器的方法包括两种:setTimeout和setInterval。首先它们接收的参数相同:第一个参数是一个函数,用于定时器执行,第二个参数是一个数字,代表过多少毫秒之后定时器执行函数。它们的不同在于:setTimeout 是在经过指定的时间之后,只执行一次函数,而setInterval,则是每间隔指定时间,就执行函数一次,说简单点的话,就是setInterval是setTimeout的循环版。

  js中关于定时器的方法有两种:setTimeout和setInterval。它们接收的参数是一样的,第一个参数是函数,用于定时器的执行,第二个参数是数字,表示多少毫秒之后执行函数。它们的不同点在于setTimeout只执行一次指定的函数,而setInterval则每隔规定的时间就执行一次指定的函数。

我们先来看一下需要实现的雪花效果:

关于定时器还有一个用法:消除定时器,方法同样有两种:clearTimeout 和 clearInterval,它们分别对应不同类型的定时器。另外,它们都只接收一个参数,这个参数是定时器返回的一个值(我在chrome中调试发现这个返回值都是数字),用于指定消除那个定时器。

  在定时器后面我们还要知道清除定时器的方法:clearTimeout和clearInterval。它们都只接收一个参数,即定时器返回的值,用于消除指定的定时器。

这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval。

它们的不同点在于setTimeout只执行一次指定的函数,setTimeout函数用来指定某个函数或某段代码。定时器的知识掌握之后,就开始分析怎样使用定时器让元素动起来。其实这个很简单,就是类似电影的原理一样,让元素在很短的时间内发生连续的位移,我们看起来的话这个元素就想是在不停地运动啦。关于怎么让元素产生位移,通过JS修改元素的样式就可以实现,例如

  知道定时器以后我们就要想办法让图片动起来,让图片元素按一定的速度移位就能实现。可以用js控制元素的样式,例如:

setTimeout()

oUl.style.left = oUl.offsetLeft + speed + 'px';

  oUl.style.left = oUl.offsetLeft + speed + ``'px';//其中speed的正负可以改变移动的方向。

setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。

上面的代码中speed就是每次产生的位移。关于speed使用还挺有意思的:我们可以修改speed的正负值来修改滚动的方向。

  代码如下:

var timerId = setTimeout

另外,关于元素的属性 offsetLeft 我个人认为需要注意两点:offsetLeft的值由它自己通过定位的left和自己设定的margin的和、offsetLeft它是相对于它的包含层的距离。当然这都是我自己的理解,肯定不是很准确,这个坑记着,下次专门解决它。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>ZuiYangDan</title>
 7     <style>
 8         * {
 9             margin: 0;
10             padding: 0;
11             list-style: none;
12         }
13         
14         #container {
15             width: 100%;
16             border: 1px solid #aaa;
17             margin: 100px 0px;
18         }
19         
20         #pictures {
21             width: 100%;
22             height: 520px;
23             overflow: hidden;
24             position: relative;
25         }
26         
27         #ul1 {
28             position: absolute;
29             left: 0;
30             top: 0;
31             overflow: hidden;
32         }
33         
34         #ul1 li {
35             float: left;
36             width: 700px;
37             height: auto;
38         }
39         
40         #ul1 li img {
41             width: 700px;
42             height: auto;
43         }
44 
45     </style>
46     <script>
47         window.onload = function() {
48             var oDiv = document.getElementById("pictures");
49             var oUl = document.getElementById("ul1");
50             var speed = -3;
51             var oLi = document.getElementsByTagName("li");
52 
53             oUl.innerHTML += oUl.innerHTML;//先把图片增加一组
54             oUl.style.width = oLi.length * oLi[0].offsetWidth + "px";
55 
56             function move() {
57                 if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
58                     oUl.style.left = "0";
59                 }
60                 oUl.style.left = oUl.offsetLeft + speed + "px";
61             }
62             var timer = setInterval(move, 30);
63             oDiv.onmouseover = function() {
64                 clearInterval(timer);
65             };
66             oDiv.onmouseout = function() {
67                 timer = setInterval(move, 30);
68             };
69         }
70 
71     </script>
72 </head>
73 
74 <body>
75     <div id="container">
76         <div id="pictures">
77             <ul id="ul1">
78                 <li><img src="./image/P70225-210657.jpg" alt="图片 1"></li>
79                 <li><img src="./image/P70225-210750.jpg" alt="图片 2"></li>
80                 <li><img src="./image/P70225-210838.jpg" alt="图片 3"></li>
81                 <li><img src="./image/P70225-210909.jpg" alt="图片 4"></li>
90             </ul>
91         </div>
92     </div>
93 </body>
94 
95 </html>

上面代码中,setTimeout函数接受两个参数,第一个参数func|code是将要推迟执行的函数名或者一段代码,第二个参数delay是推迟执行的毫秒数。

让元素动起来的原理基本就是这样,下面开始分析这个无缝滚动展示图片的实现方法,我举得例子都是向左滚动的,向右的原理一样,代码中有提到:

 

setInterval()

首先假设需要循环滚动的图片只有4张,为了满足图片滚动起来有循环的要求,就需要把图片如图这样做:

setInterval函数的用法与setTimeout完全一致,区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行。

这样当第一张图片1滚动出边框时,后面的图片1则出现在图片4的后面,这样效果看起来就和循环一样~

clearTimeout

当图片滚动到下面的这种情况时:

setTimeout和setInterval函数,都返回一个表示计数器编号的整数值,将该整数传入clearTimeout和clearInterval函数,就可以取消对应的定时器。

继续滚动就会导致图片后面出现空白,就不是循环滚动的效果了,其实这点也是程序的关键所在,每当图片滚动到图这种情况时,就应该让图片重新回到图那种状态再继续滚动,这样的话就形成了无缝循环滚动的效果。

var id1 = setTimeout;var id2 = setInterval;clearTimeout;clearInterval;

另外拓展一下程序写了鼠标移入图片停止滚动,移出继续滚动的效果,就是利用消除定时器的方法实现的,代码很简单就不介绍了。还有我为了样式好看一点,把图片都设置为160*120的尺寸使用的,大家运行代码是需要自己准备图片。

setTimeout 和 setInterval 必须要等到当前脚本的同步任务和“任务队列”中已有的事件,全部处理完以后,才会执行setTimeout指定的任务。

 Title  *{ margin: 0; padding: 0; } #div1{ width: 640px; height: 120px; margin: 100px auto; background-color: #646464; position: relative; overflow: hidden; } #div1 ul{ position:absolute; left:0; top:0; overflow: hidden; background-color: #3b7796; } #div1 ul li{ float: left; width: 160px; height: 120px; list-style: none; }   window.onload = function(){ var oDiv = document.getElementById; var oUl = document.getElementById; var speed = 2;//&#21021;&#22987;&#21270;&#36895;&#24230; oUl.innerHTML += oUl.innerHTML;//&#22270;&#29255;&#20869;&#23481;*2-----&#21442;&#32771;&#22270; var oLi= document.getElementsByTagName; oUl.style.width = oLi.length*160+'px';//&#35774;&#32622;ul&#30340;&#23485;&#24230;&#20351;&#22270;&#29255;&#21487;&#20197;&#25918;&#19979; var oBtn1 = document.getElementById; var oBtn2 = document.getElementById; function move(){ if(oUl.offsetLeft&lt;-{//&#21521;&#24038;&#28378;&#21160;&#65292;&#24403;&#38752;&#24038;&#30340;&#22270;4&#31227;&#20986;&#36793;&#26694;&#26102; oUl.style.left = 0; } if{//&#21521;&#21491;&#28378;&#21160;&#65292;&#24403;&#38752;&#21491;&#30340;&#22270;1&#31227;&#20986;&#36793;&#26694;&#26102; oUl.style.left = -+'px'; } oUl.style.left = oUl.offsetLeft + speed + 'px'; } oBtn1.addEventListener{ speed = -2; },false); oBtn2.addEventListener{ speed = 2; },false); var timer = setInterval;//&#20840;&#23616;&#21464;&#37327; &#65292;&#20445;&#23384;&#36820;&#22238;&#30340;&#23450;&#26102;&#22120; oDiv.addEventListener('mouseout', function () { timer = setInterval; oDiv.addEventListener('mousemove', function () { clearInterval;//&#40736;&#26631;&#31227;&#20837;&#28165;&#38500;&#23450;&#26102;&#22120; },false); }           

我们继续说实现雪花飘落的效果

以上就是js实现无缝滚动特效的详细代码,希望对大家的学习有所帮助。

1、定义一片雪花模板;2、设置第一个定时器,周期性定时器,每隔一段时间生成一片雪花; 3、设置第二个定时器,一次性定时器,当第一个定时器生成雪花,并在页面上渲染出来后,修改雪花的样式,让雪花动起来; 4、设置第三个定时器,当雪花落下后,删除雪花。

上面是实现的思路,下面写出具体的代码,下面的代码是JS原生代码,最后会附上JQuery实现的代码,思路都一样。

  body { background-color: #000; /*防止出现向下滚动条*/ overflow: hidden; }   function snow() { // 1&#12289;&#23450;&#20041;&#19968;&#29255;&#38634;&#33457;&#27169;&#26495; var flake = document.createElement; // &#38634;&#33457;&#23383;&#31526; &amp;#10052;&amp;#10057;&amp;#10053;&amp;#10054;&amp;#10043;&amp;#10044;&amp;#10055;&amp;#10056;&amp;#10058;&amp;#10021;&amp;#10042; flake.innerHTML = '&amp;#10054;'; flake.style.cssText = 'position:absolute;color:#fff;'; //&#33719;&#21462;&#39029;&#38754;&#30340;&#39640;&#24230; &#30456;&#24403;&#20110;&#38634;&#33457;&#19979;&#33853;&#32467;&#26463;&#26102;Y&#36724;&#30340;&#20301;&#32622; var documentHieght = window.innerHeight; //&#33719;&#21462;&#39029;&#38754;&#30340;&#23485;&#24230;&#65292;&#21033;&#29992;&#36825;&#20010;&#25968;&#26469;&#31639;&#20986;&#65292;&#38634;&#33457;&#24320;&#22987;&#26102;left&#30340;&#20540; var documentWidth = window.innerWidth; //&#23450;&#20041;&#29983;&#25104;&#19968;&#29255;&#38634;&#33457;&#30340;&#27627;&#31186;&#25968; var millisec = 100; //2&#12289;&#35774;&#32622;&#31532;&#19968;&#20010;&#23450;&#26102;&#22120;&#65292;&#21608;&#26399;&#24615;&#23450;&#26102;&#22120;&#65292;&#27599;&#38548;&#19968;&#27573;&#26102;&#38388;&#29983;&#25104;&#19968;&#29255;&#38634;&#33457;&#65307; setInterval { //&#39029;&#38754;&#21152;&#36733;&#20043;&#21518;&#65292;&#23450;&#26102;&#22120;&#23601;&#24320;&#22987;&#24037;&#20316; //&#38543;&#26426;&#29983;&#25104;&#38634;&#33457;&#19979;&#33853; &#24320;&#22987; &#26102;left&#30340;&#20540;&#65292;&#30456;&#24403;&#20110;&#24320;&#22987;&#26102;X&#36724;&#30340;&#20301;&#32622; var startLeft = Math.random() * documentWidth; //&#38543;&#26426;&#29983;&#25104;&#38634;&#33457;&#19979;&#33853; &#32467;&#26463; &#26102;left&#30340;&#20540;&#65292;&#30456;&#24403;&#20110;&#32467;&#26463;&#26102;X&#36724;&#30340;&#20301;&#32622; var endLeft = Math.random() * documentWidth; //&#38543;&#26426;&#29983;&#25104;&#38634;&#33457;&#22823;&#23567; var flakeSize = 5 + 20 * Math.random(); //&#38543;&#26426;&#29983;&#25104;&#38634;&#33457;&#19979;&#33853;&#25345;&#32493;&#26102;&#38388; var durationTime = 4000 + 7000 * Math.random(); //&#38543;&#26426;&#29983;&#25104;&#38634;&#33457;&#19979;&#33853; &#24320;&#22987; &#26102;&#30340;&#36879;&#26126;&#24230; var startOpacity = 0.7 + 0.3 * Math.random(); //&#38543;&#26426;&#29983;&#25104;&#38634;&#33457;&#19979;&#33853; &#32467;&#26463; &#26102;&#30340;&#36879;&#26126;&#24230; var endOpacity = 0.2 + 0.2 * Math.random(); //&#20811;&#38534;&#19968;&#20010;&#38634;&#33457;&#27169;&#26495; var cloneFlake = flake.cloneNode; //&#31532;&#19968;&#27425;&#20462;&#25913;&#26679;&#24335;&#65292;&#23450;&#20041;&#20811;&#38534;&#20986;&#26469;&#30340;&#38634;&#33457;&#30340;&#26679;&#24335; cloneFlake.style.cssText += ` left: ${startLeft}px; opacity: ${startOpacity}; font-size:${flakeSize}px; top:-25px; transition:${durationTime}ms; `; //&#25340;&#25509;&#21040;&#39029;&#38754;&#20013; document.body.appendChild; //&#35774;&#32622;&#31532;&#20108;&#20010;&#23450;&#26102;&#22120;&#65292;&#19968;&#27425;&#24615;&#23450;&#26102;&#22120;&#65292; //&#24403;&#31532;&#19968;&#20010;&#23450;&#26102;&#22120;&#29983;&#25104;&#38634;&#33457;&#65292;&#24182;&#22312;&#39029;&#38754;&#19978;&#28210;&#26579;&#20986;&#26469;&#21518;&#65292;&#20462;&#25913;&#38634;&#33457;&#30340;&#26679;&#24335;&#65292;&#35753;&#38634;&#33457;&#21160;&#36215;&#26469;&#65307; setTimeout { //&#31532;&#20108;&#27425;&#20462;&#25913;&#26679;&#24335; cloneFlake.style.cssText += ` left: ${endLeft}px; top:${documentHieght}px; opacity:${endOpacity}; `; //4&#12289;&#35774;&#32622;&#31532;&#19977;&#20010;&#23450;&#26102;&#22120;&#65292;&#24403;&#38634;&#33457;&#33853;&#19979;&#21518;&#65292;&#21024;&#38500;&#38634;&#33457;&#12290; setTimeout { cloneFlake.remove; }, 0); }, millisec); } snow(); 

因为定时器添加的事件,会在下一次Event Loop执行,所以第二个定时器的作用是为了让生成的雪花先拼接到页面中渲染出来后,再修改他的样式,这样才能让他动起来,如果没有这个定时器,浏览器会把所有的JS代码都执行完之后才渲染页面,这样的话后面的样式就直接覆盖前面的样式了,雪花就没法动了,这和浏览器的线程有关系。

简单说,意思就是用了这个定时器,能把两次修改样式的代码分开执行,可以先把第一次修改的样式渲染后,在进行第二次的修改,雪花就会动了。

  body { background-color: #000; /*防止出现向下滚动条*/ overflow: hidden; }    function snow() { //1&#12289;&#23450;&#20041;&#19968;&#29255;&#38634;&#33457;&#27169;&#26495; var flake = $.css({ "position": "absolute", "color": "#fff" }).html; //&#33719;&#21462;&#39029;&#38754;&#30340;&#23485;&#24230;&#65292;&#21033;&#29992;&#36825;&#20010;&#25968;&#26469;&#31639;&#20986;&#65292;&#38634;&#33457;&#24320;&#22987;&#26102;left&#30340;&#20540; var documentWidth = $; //&#33719;&#21462;&#39029;&#38754;&#30340;&#39640;&#24230; &#30456;&#24403;&#20110;&#38634;&#33457;&#19979;&#33853;&#32467;&#26463;&#26102;Y&#36724;&#30340;&#20301;&#32622; var documentHieght = $; //&#23450;&#20041;&#29983;&#25104;&#19968;&#29255;&#38634;&#33457;&#30340;&#27627;&#31186;&#25968; var millisec = 100; //2&#12289;&#35774;&#32622;&#31532;&#19968;&#20010;&#23450;&#26102;&#22120;&#65292;&#21608;&#26399;&#24615;&#23450;&#26102;&#22120;&#65292;&#27599;&#38548;&#19968;&#27573;&#26102;&#38388;&#29983;&#25104;&#19968;&#29255;&#38634;&#33457;&#65307; setInterval { //&#38543;&#26426;&#29983;&#25104;&#38634;&#33457;&#19979;&#33853; &#24320;&#22987; &#26102;left&#30340;&#20540;&#65292;&#30456;&#24403;&#20110;&#24320;&#22987;&#26102;X&#36724;&#30340;&#20301;&#32622; var startLeft = Math.random() * documentWidth; //&#38543;&#26426;&#29983;&#25104;&#38634;&#33457;&#19979;&#33853; &#32467;&#26463; &#26102;left&#30340;&#20540;&#65292;&#30456;&#24403;&#20110;&#32467;&#26463;&#26102;X&#36724;&#30340;&#20301;&#32622; var endLeft = Math.random() * documentWidth; //&#38543;&#26426;&#29983;&#25104;&#38634;&#33457;&#22823;&#23567; var flakeSize = 5 + 20 * Math.random(); //&#38543;&#26426;&#29983;&#25104;&#38634;&#33457;&#19979;&#33853;&#25345;&#32493;&#26102;&#38388; var durationTime = 4000 + 7000 * Math.random(); //&#38543;&#26426;&#29983;&#25104;&#38634;&#33457;&#19979;&#33853; &#24320;&#22987; &#26102;&#30340;&#36879;&#26126;&#24230; var startOpacity = 0.7 + 0.3 * Math.random(); //&#38543;&#26426;&#29983;&#25104;&#38634;&#33457;&#19979;&#33853; &#32467;&#26463; &#26102;&#30340;&#36879;&#26126;&#24230; var endOpacity = 0.2 + 0.2 * Math.random(); //3&#12289;&#20811;&#38534;&#19968;&#20010;&#38634;&#33457;&#27169;&#26495;,&#23450;&#20041;&#38634;&#33457;&#30340;&#21021;&#22987;&#26679;&#24335;&#65292;&#25340;&#25509;&#21040;&#39029;&#38754;&#20013; flake.clone.css({ "left": startLeft, "opacity": startOpacity, "font-size": flakeSize, "top": "-25px", }).animate({ //&#25191;&#34892;&#21160;&#30011; "left": endLeft, "opacity": endOpacity, "top": documentHieght }, durationTime, function() { //4&#12289;&#24403;&#38634;&#33457;&#33853;&#19979;&#21518;&#65292;&#21024;&#38500;&#38634;&#33457;&#12290; $; }, millisec); }; snow(); 

编辑:服务器运维 本文来源:它们的不同点在于setTimeout只执行一次指定的函数

关键词: