js实现文字向上滚动

最新推荐文章于 2024-05-03 22:01:01 发布

weixin_33980459

最新推荐文章于 2024-05-03 22:01:01 发布

阅读量129

点赞数

原文链接：http://www.cnblogs.com/shawn-Y/p/8377708.html

版权

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>

转载于:https://www.cnblogs.com/shawn-Y/p/8377708.html