js_跑馬燈
阿新 • • 發佈：2017-12-28
前端 讓我 left char line 上下 -h 美國 func 
跑馬燈？剛聽到這個詞的時候，腦袋第一個想到的是跑馬？嗯？就是香港的那種跑馬場。懂？其次就是霓虹燈了，一閃一閃的多好看。
霓虹燈？哦，那是城市的傑作，記憶中是。開往城市邊緣開，把車窗都搖下來，用速度換一點痛快。。。
別問我為什麽想到這個歌詞，就是想到了。
技術段：
CSS
1 <style type="text/css"> 2 /*1.跑馬燈CSS*/ 3 .marquee { 4 position: relative; 5 font-size: 1.2rem; 6 line-height: 1.44rem; 7height: 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_跑馬燈