|
|
1、首先給容器設(shè)定高度或?qū)挾龋热鐄l，設(shè)置ul高40px;overflow:hidden；
2、容器高度設(shè)定后，內(nèi)容的高度超出40px，超過(guò)部分溢出，被隱藏，scrollTop屬性可用，這一點(diǎn)可以用overflow:scroll來(lái)看效果；
3、改變?nèi)萜鞯膕crollTop（上下滾動(dòng)）屬性的值，讓內(nèi)容上下移動(dòng)一個(gè)節(jié)點(diǎn)的位置（滾動(dòng)的原理）；
4、到滾動(dòng)的高度scrollTop大于或等于要滾動(dòng)節(jié)點(diǎn)的高度時(shí)，設(shè)置scrollTop=0，并把把子節(jié)點(diǎn)樹(shù)中的第一個(gè)移動(dòng)到最后，重新開(kāi)始滾動(dòng)，無(wú)間斷循環(huán)滾動(dòng)效果就出現(xiàn)了。
html 源碼
復(fù)制代碼 代碼如下:
<!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>滾動(dòng)</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源碼
復(fù)制代碼 代碼如下:
// 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;
//滾動(dòng)效果
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);
}
};
//開(kāi)始滾動(dòng)
start=function(){
var lh=lineHeight||container.getElementsByTagName('li')[0].offsetHeight;
if (container.scrollHeight - container.offsetHeight >= lh)
scrollTimeId = setInterval(scrollexc, speed);
};
//把子節(jié)點(diǎn)樹(shù)中的第一個(gè)移動(dòng)到最后
fire=function(){
container.appendChild(container.getElementsByTagName('li')[0]);
};
container.onmouseover=function(){pause=true;};
container.onmouseout=function(){pause=false;};
setTimeout(start,delay*1000);
};
JavaScript技術(shù)：js 實(shí)現(xiàn)無(wú)縫滾動(dòng) 兼容IE和FF，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
