这种节奏经常用在相同布局内容多的地方,列如排行榜,新闻等地方。为了效率,在此做个笔记
HTML:
<div id="divgd">
<div id="boxmiddle">
<div id="box1samlle">
<span><label>王芳王芳王芳王芳王芳王芳</label>156****9707<label>护肤礼包</label></span>
<span><label>留校留校留校留校</label>156****9707<label>护肤礼包护肤礼包护肤礼包护肤礼包</label></span>
<span><label>阿雅阿雅阿雅阿雅阿雅阿雅</label>156****9707<label>护肤礼包</label></span>
<span><label>韩语</label>156****9707<label>护肤礼包</label></span>
<span><label>小刘</label>156****9707<label>护肤礼包</label></span>
<span><label>张小泉</label>156****9707<label>护肤礼包护肤礼包护肤礼包护肤礼包护肤礼包护肤礼包</label></span>
<span><label>兰国富兰国富兰国富兰国富兰国富</label>156****9707<label>护肤礼包</label></span>
<span><label>草尼玛草尼玛草尼玛草尼玛</label>156****9707<label>护肤礼包</label></span>
<span><label>菊花</label>156****9707<label>护肤礼包</label></span>
<span><label>兰花</label>156****9707<label>护肤礼包</label></span>
</div>
<div id="addbox1"></div>
</div>
</div>
CSS:
#divgd {width: 78%;height: 26rem;overflow: hidden;color: #333;margin: 0 auto;font-size: 1rem;}
#boxmiddle {width: 100%;height: 800%;background: pink;}
#box1samlle,
#addbox1 {float: left;display: block;width: 100%;}
#box1samlle span,
#addbox1 span {float: left;width: 100%;display: block;text-align: center;height: 3rem;line-height: 3rem;}
#box1samlle span label,
#addbox1 span label {display: inline-block;width: 30%;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#box1samlle span label:nth-of-type(1),
#addbox1 span label:nth-of-type(1) {float: left;}
#box1samlle span label:nth-of-type(2),
#addbox1 span label:nth-of-type(2) {float: right;}
JS:
var speed1 = 60;
var demo = document.getElementById("divgd");
var demo1 = document.getElementById("box1samlle");
var demo2 = document.getElementById("addbox1");
demo2.innerHTML = demo1.innerHTML;
if(document.querySelectorAll("span").length>=20){
var MyMar = setInterval(Marquee, speed1);
}else{
}
function Marquee() {
if(demo2.offsetHeight - demo.scrollTop <= 0) {
demo.scrollTop -= demo1.offsetHeight
} else {
demo.scrollTop++;
}
}
//下面的一般用在电脑端鼠标事件
demo.onmouseover = function() {
clearInterval(MyMar)
};
demo.onmouseout = function() {
MyMar = setInterval(Marquee, speed1);
}