跑马灯？刚听到这个词的时候，脑袋第一个想到的是跑马？嗯？就是香港的那种跑马场。懂？其次就是霓虹灯了，一闪一闪的多好看。
霓虹灯？哦，那是城市的杰作，记忆中是。开往城市边缘开，把车窗都摇下来，用速度换一点痛快。。。
别问我为什么想到这个歌词，就是想到了。
技术段：
CSS
<style type="text/css">
/*1.跑马灯CSS*/
.marquee {
position: relative;
font-size: 1.2rem;
line-height: 1.44rem;
height: 1.4rem;
overflow: hidden;
color: #666;
}
.marquee li {
overflow: hidden;
margin-left: 26.5%;
}
</style>
HTML
<!-- 2.跑马灯HTML -->
<div class="marquee vip_zmd_area">
<ul id="marqueebox">
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
</ul>
</div>
<!---->
JS
<script type="text/javascript">
//3.跑马灯JS
startmarquee(20, 2000); //速度，间隔
function startmarquee(speed, delay) {
var p = false;
var t;
var sh;
var o = document.getElementById("marqueebox");
var lh = document.querySelector('.marquee').clientHeight;
o.innerHTML += o.innerHTML; o.style.marginTop = 0;
o.onmouseover = function() {
p = true;
}
o.onmouseout = function() {
p = false;
} function start() {
sh = o.offsetHeight;
o.style.height = sh + 'px';
t = setInterval(scrolling, speed);
if(!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
} function scrolling() {
if(parseInt(o.style.marginTop) % lh != 0) {
o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
if(Math.abs(parseInt(o.style.marginTop)) >= sh / 2) o.style.marginTop = 0;
} else {
clearInterval(t);
setTimeout(start, delay);
}
}
setTimeout(start, delay);
// start();
}
</script>
伸手党往下看：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1.跑马灯CSS*/
.marquee {
position: relative;
font-size: 1.2rem;
line-height: 1.44rem;
height: 1.4rem;
overflow: hidden;
color: #666;
}
.marquee li {
overflow: hidden;
margin-left: 26.5%;
}
</style>
</head> <body>
<!-- 2.跑马灯HTML -->
<div class="marquee vip_zmd_area">
<ul id="marqueebox">
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
<li class="tp"><span class="colorfff">恭喜中国平安张*升级为</span>超级会员</li>
</ul>
</div>
<!---->
</body>
<script type="text/javascript">
//3.跑马灯JS
startmarquee(20, 2000); //速度，间隔
function startmarquee(speed, delay) {
var p = false;
var t;
var sh;
var o = document.getElementById("marqueebox");
var lh = document.querySelector('.marquee').clientHeight;
o.innerHTML += o.innerHTML; o.style.marginTop = 0;
o.onmouseover = function() {
p = true;
}
o.onmouseout = function() {
p = false;
} function start() {
sh = o.offsetHeight;
o.style.height = sh + 'px';
t = setInterval(scrolling, speed);
if(!p) o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
} function scrolling() {
if(parseInt(o.style.marginTop) % lh != 0) {
o.style.marginTop = parseInt(o.style.marginTop) - 1 + "px";
if(Math.abs(parseInt(o.style.marginTop)) >= sh / 2) o.style.marginTop = 0;
} else {
clearInterval(t);
setTimeout(start, delay);
}
}
setTimeout(start, delay);
// start();
}
</script> </html>
这是一个上下滚动的跑马灯，需要左右滚动的同学，自己研究下。
前端这条路，我似乎越陷越深了，那就让我陷下去吧。
好想来一趟旅行，往西藏，往尼泊尔，往印度，往土耳其，往欧洲，往美国，往巴西，往澳大利亚，往新加坡。