js实现 文字向上滚动
html部分:
<div id="box"> <div class="content"> <ul class="list_box">
<li>11第一个li列表</li>
<li>22第二个li列表</li>
<li>33第三个li列表</li>
<li>44第四个li列表</li>
<li>55第五个li列表</li>
<li>66第六个li列表</li>
<li>77第七个li列表</li>
</ul> </div> </div>
html代码部分注意点:最外层的盒子样式要添加id,(我试了class无法通过class控制scrolltop,如果是我自己知识层面的原因,还请指出),来判断scrolltop的值
样式部分:
div,ul,li {
margin: 0;
padding: 0;
}
.box {
width: 220px;
height: 160px;
overflow: hidden;
}
#box {
width: 220px;
height: 160px;
overflow: hidden;
}
.content {
width:220px;
}
.list_box {
width: 200px;
text-align: center;
list-style: none;
}
.list_box li {
margin:10px 5px;
}
js代码部分
将所有图片克隆一份使用cloneNode(true),,追加到当前图片之后使用appendChild(节点)插入,放到最后,在第一份滚动完了之后,回滚到第一份,这样会造成一直滚动的效果;
<script>
var box = document.getElementById("box");
var content = document.getElementsByClassName("content")[0];
var list_box = document.getElementsByClassName("list_box")[0];
//得到所有图片的高度
var height= list_box.offsetHeight;
//将所有图片克隆一份,追加当当前图片之后 appendChild(节点)
// cloneNode(true)true表示被clone的节点的所有子节点也会被clone(既深度clone),false(默认)只会clone原节点
// 克隆一份放在原图之后,可以在第一份滚动完之后,回滚到第一份,这样就会造成一直滚动的效果
// content.appendChild(imglist.cloneNode(true));
content.appendChild(list_box.cloneNode(true));//克隆一个ul及其内容
function scrollText() {
//判断一轮图片是否滚动完
if(box.scrollTop >= height) {
box.scrollTop = 0;
}
box.scrollTop += 28;
}
var time = 1500;
var mytimer = setInterval(scrollText,time);
box.onmouseover = function() {
clearInterval(mytimer);
}
box.onmouseout = function() {
mytimer = setInterval(scrollText,time);
}
</script>
O(∩_∩)O哈哈~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体向上滚动</title> <style> div,ul,li { margin: 0; padding: 0; } .box { width: 220px; height: 160px; overflow: hidden; } #box { width: 220px; height: 160px; overflow: hidden; } .content { width:220px; } .list_box { width: 200px; text-align: center; list-style: none; } .list_box li { margin:10px 5px; } </style> </head> <body> <div id="box"> <div class="content"> <ul class="list_box"> <li>11李华 中了10块钱</li> <li>22Leo 中了一个手机</li> <li>33刘明 中了一块毛巾</li> <li>44ll 中了保温杯</li> <li>55nice 中了100块钱红包</li> <li>66108 中了20元优惠券</li> <li>77ok 中了100块钱</li> </ul> </div> </div> <script> var box = document.getElementById("box"); var content = document.getElementsByClassName("content")[0]; var list_box = document.getElementsByClassName("list_box")[0]; //得到所有图片的高度 var height= list_box.offsetHeight; //将所有图片克隆一份,追加当当前图片之后 appendChild(节点) // cloneNode(true)true表示被clone的节点的所有子节点也会被clone(既深度clone),false(默认)只会clone原节点 // 克隆一份放在原图之后,可以在第一份滚动完之后,回滚到第一份,这样就会造成一直滚动的效果 // content.appendChild(imglist.cloneNode(true)); content.appendChild(list_box.cloneNode(true));//克隆一个ul及其内容 function scrollText() { //判断一轮图片是否滚动完 if(box.scrollTop >= height) { box.scrollTop = 0; } box.scrollTop += 28; } var time = 1500; var mytimer = setInterval(scrollText,time); box.onmouseover = function() { clearInterval(mytimer); } box.onmouseout = function() { mytimer = setInterval(scrollText,time); } </script> </body> </html>