js_跑马灯

跑马灯？刚听到这个词的时候，脑袋第一个想到的是跑马？嗯？就是香港的那种跑马场。懂？其次就是霓虹灯了，一闪一闪的多好看。

霓虹灯？哦，那是城市的杰作，记忆中是。开往城市边缘开，把车窗都摇下来，用速度换一点痛快。。。

别问我为什么想到这个歌词，就是想到了。

技术段：

CSS

 

 1 <style type="text/css">
 2     /*1.跑马灯CSS*/
 3     .marquee {
 4         position: relative;
 5         font-size: 1.2rem;
 6         line-height: 1.44rem;
 7         height: 1.4rem;
 8         overflow: hidden;
 9         color: #666;
10     }
11     .marquee li {
12         overflow: hidden;
13         margin-left: 26.5%;
14     }
15 </style>

 

HTML

 1 <!-- 2.跑马灯HTML -->
 2   <div class="marquee vip_zmd_area">
 3     <ul id="marqueebox">
 4         <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
 5         <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
 6         <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
 7         <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
 8         <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
 9         <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
10     </ul>
11   </div>
12 <!---->

JS

 1 <script type="text/javascript">
 2         //3.跑马灯JS
 3         startmarquee(20, 2000); //速度，间隔
 4         function startmarquee(speed, delay) {
 5             var p = false;
 6             var t;
 7             var sh;
 8             var o = document.getElementById("marqueebox");
 9             var lh = document.querySelector('.marquee').clientHeight;
10             o.innerHTML += o.innerHTML;
11 
12             o.style.marginTop = 0;
13             o.onmouseover = function() {
14                 p = true;
15             }
16             o.onmouseout = function() {
17                 p = false;
18             }
19 
20             function start() {
21                 sh = o.offsetHeight;
22                 o.style.height = sh + 'px';
23                 t = setInterval(scrolling, speed);
24                 if(!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
25             }
26 
27             function scrolling() {
28                 if(parseInt(o.style.marginTop) % lh != 0) {
29                     o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
30                     if(Math.abs(parseInt(o.style.marginTop)) >= sh / 2) o.style.marginTop = 0;
31                 } else {
32                     clearInterval(t);
33                     setTimeout(start, delay);
34                 }
35             }
36             setTimeout(start, delay);
37             // start();
38         }
39 </script>

 

伸手党往下看：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             /*1.跑马灯CSS*/
 9             .marquee {
10                 position: relative;
11                 font-size: 1.2rem;
12                 line-height: 1.44rem;
13                 height: 1.4rem;
14                 overflow: hidden;
15                 color: #666;
16             }
17             .marquee li {
18                 overflow: hidden;
19                 margin-left: 26.5%;
20             }
21         </style>
22     </head>
23 
24     <body>
25         <!-- 2.跑马灯HTML -->
26         <div class="marquee vip_zmd_area">
27             <ul id="marqueebox">
28                 <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
29                 <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
30                 <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
31                 <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
32                 <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
33                 <li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
34             </ul>
35         </div>
36         <!---->
37     </body>
38     <script type="text/javascript">
39         //3.跑马灯JS
40         startmarquee(20, 2000); //速度，间隔
41         function startmarquee(speed, delay) {
42             var p = false;
43             var t;
44             var sh;
45             var o = document.getElementById("marqueebox");
46             var lh = document.querySelector('.marquee').clientHeight;
47             o.innerHTML += o.innerHTML;
48 
49             o.style.marginTop = 0;
50             o.onmouseover = function() {
51                 p = true;
52             }
53             o.onmouseout = function() {
54                 p = false;
55             }
56 
57             function start() {
58                 sh = o.offsetHeight;
59                 o.style.height = sh + 'px';
60                 t = setInterval(scrolling, speed);
61                 if(!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
62             }
63 
64             function scrolling() {
65                 if(parseInt(o.style.marginTop) % lh != 0) {
66                     o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
67                     if(Math.abs(parseInt(o.style.marginTop)) >= sh / 2) o.style.marginTop = 0;
68                 } else {
69                     clearInterval(t);
70                     setTimeout(start, delay);
71                 }
72             }
73             setTimeout(start, delay);
74             // start();
75         }
76     </script>
77 
78 </html>
View Code

 

这是一个上下滚动的跑马灯，需要左右滚动的同学，自己研究下。

前端这条路，我似乎越陷越深了，那就让我陷下去吧。

好想来一趟旅行，往西藏，往尼泊尔，往印度，往土耳其，往欧洲，往美国，往巴西，往澳大利亚，往新加坡。

 

posted @ 2017-12-28 19:27  幽谷兰花  阅读(459)  评论(0)  编辑  收藏  举报