源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js 实现无缝滚动 兼容IE和FF

  • 时间:2022-05-17 20:32 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js 实现无缝滚动 兼容IE和FF
原理解析: 1、首先给容器设定高度或宽度,比如ul,设置ul高40px;overflow:hidden; 2、容器高度设定后,内容的高度超出40px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果; 3、改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理); 4、到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间断循环滚动效果就出现了。 html 源码
[u]复制代码[/u] 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>滚动</title> <script type="text/javascript" src="divCycle.js" src="divCycle.js"></script> <style><!-- li{ height:20px; mar} --></style><style bogus="1">li{ height:20px; mar}</style> </head> <body> <div> <ul id="list" style="border:1px #ccc solid; overflow:hidden; height:40px; width:100px; margin:0; padding:0; list-style-type:none;">     <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </div> <script type="text/javascript"><!-- new simpleScroll("list",20,40,1); // --></script> </body> </html>
js源码
[u]复制代码[/u] 代码如下:
// JavaScript Document /***** @author leaves chen (leaves615@gmail.com) @copyright 2009 *****/ var pause=false; var scrollTimeId=null; var container=null; var lineHeight=null; var speed=0; var delay=0; simpleScroll=function(container1,lineHeight1,speed1,delay1){     container=document.getElementById(container1);     lineHeight=lineHeight1;     speed=speed1;     delay=delay1;     //滚动效果     scrollexc=function(){         if(pause) return ;         container.scrollTop+=2;         var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;         if(container.scrollTop%lh<=1){             clearInterval(scrollTimeId);             fire();             container.scrollTop=0;             setTimeout(start,delay*1000);         }     };     //开始滚动     start=function(){         var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;             if (container.scrollHeight - container.offsetHeight >= lh)                 scrollTimeId = setInterval(scrollexc, speed);     };     //把子节点树中的第一个移动到最后     fire=function(){         container.appendChild(container.getElementsByTagName('li')[0]);     };     container.onmouseover=function(){pause=true;};     container.onmouseout=function(){pause=false;};     setTimeout(start,delay*1000); };
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部