js滚动效果

最新推荐文章于 2022-09-30 13:06:59 发布

yangchunhe09

最新推荐文章于 2022-09-30 13:06:59 发布

阅读量107

点赞数

文章标签： JavaScript UP HTML ViewUI

本文链接：https://blog.csdn.net/yangchunhe09/article/details/83766644

版权

<html>
   <head>
<script type="text/javascript">
       // Copyright: hc360.com
// Author: Dakular
// Useage: HCmarquee(滚动对象id, 可见范围宽度, 可见范围高度, 滚动条数, 可见条数, 滚动速度, 停留时间, 方向); 方向有left和up两种
function HCmarquee(id,mw,mh,mr,sr,ms,pause){

   var obj=document.getElementById(id);
   obj.ss=false; //stop tag
   obj.mr=mr; //marquee rows
   obj.sr=sr; //marquee display rows
   obj.mw=mw; //marquee width
   obj.mh=mh; //marquee height
   obj.ms=ms; //marquee speed
   obj.pause=pause; //pause time
   obj.pt=0; //pre top
   obj.st=0; //stop time
   obj.mul=1;
   obj.con="";
   with(obj){
       style.width=mw+"px";
       style.height=mh+"px";
       noWrap=false;
       οnmοuseοver=stopm;
       οnmοuseοut=startm;
       scrollTop=0+"px";
       scrollLeft=0+"px";
   }

   if(obj.mr!=1){
               obj.tt=mh*mr/sr;
               obj.ct=mh; //current top
               obj.innerHTML+=obj.innerHTML;
               setInterval(scrollUp,obj.ms);
   }
   function scrollUp(){
       if(obj.ss==true) return;
       obj.ct+=1;
       if(obj.ct==obj.mh+1){
           obj.st+=1; obj.ct-=1;
           if(obj.st==(obj.pause*obj.mul)){
               obj.ct=0; obj.st=0;
               if(obj.mul==1) obj.mul = 1;
               else obj.mul = 1;
           }
       }else {
           obj.pt=(++obj.scrollTop);
           if(obj.pt==obj.tt){obj.scrollTop=0;}
       }
   }

   function stopm(){obj.ss=true;}
   function startm(){obj.ss=false;}

}

</script>
   </head>
   <body>
       <div id="MarqueeInfo" style="height:21px;line-height:21px;
overflow:hidden;
text-align:left;
width:223px;">ssssssssssssssssssssssssssssss<br>sssssssssdddddddddddddddddddddddffffffffffff<br>fffffffffffffdddddddddddddddwwwwwwwwwwwwsssssssssssssss<br>ssssseeeeeeeeeeeeeeeerrrrrrrrrrr</div>

       <script type="text/javascript">
           HCmarquee("MarqueeInfo",223,21,5,1,10,198);
       </script>
   </body>
</html>