无缝滚动和无缝滚动-缓存

最新推荐文章于 2024-05-02 21:07:09 发布

weixin_30375427

最新推荐文章于 2024-05-02 21:07:09 发布

阅读量52

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/taohuaya/p/9637838.html

版权

无缝滚动：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6         <style>
 7             *{margin: 0px; padding: 0px}
 8             #div1{position: relative; border: 1px solid black; width: 680px; height: 170px; margin: 100px auto; overflow: hidden; }
 9             #div1 ul{position: absolute; left: 0px}
10             #div1 ul li{list-style: none; float: left; width: 150px; height: 150px; padding: 10px}
11             #div1 ul li img{width: 150px; height: 150px}
12         </style>
13         <script>
14             window.onload = function(){
15                 var oDiv = document.getElementById('div1');
16                 var oUl = oDiv.getElementsByTagName('ul')[0];
17                 var aLis = oUl.getElementsByTagName("li");
18 
19                 oUl.innerHTML += oUl.innerHTML;//oUl的宽变成原来两倍（4张图片变8张）
20                 
21                 oUl.style.width = aLis.length * aLis[0].offsetWidth + 'px';
22 
23                 var timer = null;
24                 timer = setInterval(function(){
25                     if(oUl.offsetLeft <= -oUl.offsetWidth / 2){
26                         oUl.style.left = 0;
27                     }
28                     oUl.style.left = oUl.offsetLeft - 2 + 'px';
29                 }, 30);
30             }
31         </script>
32     </head>
33     <body>
34         <div id = 'div1'>
35             <ul>
36                 <li><img src="img/1.jpg" alt=""></li>
37                 <li><img src="img/2.jpg" alt=""></li>
38                 <li><img src="img/3.jpg" alt=""></li>
39                 <li><img src="img/4.jpg" alt=""></li>
40             </ul>
41         </div>
42     </body>
43 </html>

浏览器效果：

无缝滚动—缓冲

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Document</title>
 6         <style>
 7             *{margin: 0px; padding: 0px}
 8             #div1{position: relative; border: 1px solid black; width: 680px; height: 170px; margin: 100px auto;overflow: hidden;}
 9             #div1 ul{position: absolute; left: 0px}
10             #div1 ul li{list-style: none; float: left; width: 150px; height: 150px; padding: 10px}
11             #div1 ul li img{width: 150px; height: 150px}
12         </style>
13         <script src = '../startMove.js'></script>
14         <script>
15             window.onload = function(){
16                 var oDiv = document.getElementById('div1');
17                 var oUl = oDiv.getElementsByTagName('ul')[0];
18                 var aLis = oUl.getElementsByTagName("li");
19 
20                 oUl.innerHTML += oUl.innerHTML;//oUl的宽变成原来两倍（4张图片变8张）
21                                 
22                 oUl.style.width = aLis.length * aLis[0].offsetWidth + 'px';
23 
24                 var timer = null;
25                 //启动定时器每隔3s切换一张图片
26                 timer = setInterval(function(){
27                     //切换一张图片
28                     startMove(oUl, {left: oUl.offsetLeft - 170}, function(){//到达ul的一半时，即第四长图片切换完后，一瞬间让ul从头开始运动
29                         if(oUl.offsetLeft <= -oUl.offsetWidth / 2){
30                             oUl.style.left = "0px";
31                         }
32                     })
33 
34                 }, 3000);
35             }
36         </script>
37     </head>
38     <body>
39         <div id = 'div1'>
40             <ul>
41                 <li><img src="img/1.jpg" alt=""></li>
42                 <li><img src="img/2.jpg" alt=""></li>
43                 <li><img src="img/3.jpg" alt=""></li>
44                 <li><img src="img/4.jpg" alt=""></li>
45             </ul>
46         </div>
47     </body>
48 </html>

附件：startMove.js 文件

 1             function startMove(node, json, complete){ //complete = show
 2                 clearInterval(node.timer);
 3                 node.timer = setInterval(function(){
 4 
 5                     var isEnd = true; //假设都到达目的值了。
 6 
 7                     for(var attr in json){
 8                         //1、获取当前的值
 9                         var iCur = null;
10                         if(attr == "opacity"){
11                             iCur = parseInt(parseFloat(getStyle(node, attr)) * 100);
12                         }else{
13                             iCur = parseInt(getStyle(node, attr))
14                         }
15                         //2、计算速度
16                         var speed = (json[attr] - iCur) / 8;
17                         speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
18 
19                         //3、运动和停止分开
20                         
21                         if(attr == "opacity"){
22                             iCur += speed;
23                             node.style.opacity = iCur / 100;
24                             node.style.filter = "alpha(opacity=" + iCur + ")";
25                         }else{
26                             node.style[attr] = iCur + speed + "px";
27                         }
28 
29                         //如果这个if语句成立，说明至少有一个样式没到达目的值
30                         if(json[attr] != iCur){
31                             isEnd = false;
32                         }
33                         
34                     }
35                     if(isEnd){
36                         clearInterval(node.timer);
37                         if(complete){
38                             complete();
39                         }
40                     }
41                 }, 30);
42             }
43 
44             function getStyle(obj, attr){
45                 if(obj.currentStyle){
46                     return obj.currentStyle[attr];
47                 }else{
48                     return getComputedStyle(obj)[attr];
49                 }
50             }

浏览器效果：

附录：案例图片

再附件几张：

转载于:https://www.cnblogs.com/taohuaya/p/9637838.html

weixin_30375427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无缝滚动和无缝滚动-缓存

无缝滚动： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7...
复制链接

扫一扫