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