跑马灯？刚听到这个词的时候，脑袋第一个想到的是跑马？嗯？就是香港的那种跑马场。懂？其次就是霓虹灯了，一闪一闪的多好看。
霓虹灯？哦，那是城市的杰作，记忆中是。开往城市边缘开，把车窗都摇下来，用速度换一点痛快。。。
别问我为什么想到这个歌词，就是想到了。
技术段：
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>
这是一个上下滚动的跑马灯，需要左右滚动的同学，自己研究下。
前端这条路，我似乎越陷越深了，那就让我陷下去吧。
好想来一趟旅行，往西藏，往尼泊尔，往印度，往土耳其，往欧洲，往美国，往巴西，往澳大利亚，往新加坡。