js 實現無縫滾動兼容IE&&FF

原創

2018-09-01 14:01

原理解析：
1、首先給容器設定高度或寬度，比如ul，設置ul高40px;overflow:hidden；
2、容器高度設定後，內容的高度超出40px，超過部分溢出，被隱藏，scrollTop屬性可用，這一點可以用overflow:scroll來看效果；
3、改變容器的scrollTop（上下滾動）屬性的值，讓內容上下移動一個節點的位置（滾動的原理）；
4、到滾動的高度scrollTop大於或等於要滾動節點的高度時，設置scrollTop=0，並把把子節點樹中的第一個移動到最後，重新開始滾動，無間斷循環滾動效果就出現了。
html 源碼

<!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> <mce:script type="text/javascript" src="divCycle.js" mce_src="divCycle.js"></mce:script> <mce:style></mce:style><style mce_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> <mce:script type="text/javascript"></mce:script> </body> </html>

js源碼

// 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); };

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.

js 實現無縫滾動兼容IE&&FF

js 實現無縫滾動兼容IE&&FF

Java程序員必看的15本書：Java架構師之路

數據庫中的樹結構-JAVA設計-緩存

js 實現無縫滾動兼容IE&&FF

四種實現CSS隔行換色的方法

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

js 實現無縫滾動 兼容IE&amp;&amp;FF

js 實現無縫滾動兼容IE&&FF