向上滚动

最新推荐文章于 2022-11-28 10:00:12 发布

wenjayLiu

最新推荐文章于 2022-11-28 10:00:12 发布

阅读量361

点赞数

分类专栏： JS 特效 javascript

本文链接：https://blog.csdn.net/wenjayLiu/article/details/53508841

版权

javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

JS 特效

0 篇文章 0 订阅

订阅专栏

向上滚动

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" charset="utf-8" />
    <meta http-equiv="content-type" content="text/html" />
    <title>demo</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
ul,li,img{margin:0;padding:0;border:0;list-style-type:none;}
#luanbo{border:1px solid red;overflow:hidden;height:24px;}
#info li{height:24px;line-height:24px;}
</style>
<body>
    <div id="luanbo">
       <ul id="info">
        <li>aaaaaaaaaaa</li>
        <li>bbbbbbbbbbb</li>
        <li>ccccccccccc</li>
        <li>ddddddddddd</li>
        <li>eeeeeeeeeee</li>
        <li>fffffffffff</li>
       </ul>
    </div>


<script type="text/javascript">
var odiv=document.getElementById("luanbo");
var oul=document.getElementById("info");
var oli=document.getElementById("info").getElementsByTagName("li");
var iNow=0;
function move(obj,tg){     //运动框架
clearInterval(dt);
var dt=setInterval(function(){
    var speed=2;
    if(tg-obj.scrollTop<speed){
        tg=obj.scrollTop;
        clearInterval(dt);
    }else{
        obj.scrollTop+=speed;
    }
},30);    
}
oul.innerHTML+=oul.innerHTML;
function star(){
clearInterval(tm);
var tm=setInterval(function(){
    iNow++;
    if(odiv.scrollTop>=(oli[0].offsetHeight*oli.length)/2){
        odiv.scrollTop=0;
        iNow=0;
    }else{
    var get=oli[0].offsetHeight*iNow;
    move(odiv,get);                     //运动框架
    }
},2000); 
}
star();


</script>
</body>
</html>