码迷,mamicode.com
首页 > Web开发 > 详细

js_跑马灯

时间:2017-12-28 21:29:13      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:type   innerhtml   --   ntop   one   sele   mouse   selector   oct   

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

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

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

技术段:

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

 

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

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

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

 

js_跑马灯

标签:type   innerhtml   --   ntop   one   sele   mouse   selector   oct   

原文地址:https://www.cnblogs.com/wush-1215/p/8137422.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!