|
圖片無縫滾動的完美解決
想必大家都注意到<marquee>的不循環(huán)滾動，所以出現(xiàn)了很多替代腳本，或iframe或JS輸出<marquee>，不管怎么做，都略顯麻煩。下面說一下這個相對簡單的實現(xiàn)思路：一個設(shè)定寬度并且隱藏超出它寬度的內(nèi)容的容器demo，里面放demo1和demo2，demo1是滾動內(nèi)容,demo2為demo1的直接克隆，通過不斷改變demo1的scrollTop或者scrollLeft達(dá)到滾動的目的，當(dāng)滾動至demo1與demo2的交界處時直接跳回初始位置，因為demo1與demo2一樣，所以分不出跳動的瞬間，從而達(dá)到“無縫”滾動的目的。
先了解一下對象的幾個的屬性：
innerHTML:設(shè)置或獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的 HTML
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計算頂端位置
offsetWidth:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的寬度
好，先看這個向上滾動的代碼：
<base href="http://www.">
<div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff><div id=demo1>
<img src="images/flash8.gif">
<img src="images/link/flashempire.gif">
<img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif">
<img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2004_Pack/logo.gif">
<img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif">
<img src="/Upload/2004_Pack/link.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML file://克隆demo1為demo2
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) file://當(dāng)滾動至demo1與demo2交界時
demo.scrollTop-=demo1.offsetHeight file://demo跳到最頂端
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed) file://設(shè)置定時器
demo.onmouseover=function() {clearInterval(MyMar)}//鼠標(biāo)移上時清除定時器達(dá)到滾動停止的目的
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠標(biāo)移開時重設(shè)定時器
</script>
向下滾動：
<base href="http://www.">
<div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff>
<div id=demo1>
<img src="images/flash8.gif">
<img src="images/link/flashempire.gif">
<img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif">
<img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2004_Pack/logo.gif">
<img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif">
<img src="/Upload/2004_Pack/link.gif">
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向左滾動：
<base href="http://www.">
<div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
<img src="images/link/flashempire.gif"><img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif"><img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2004_Pack/logo.gif"><img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif"><img src="/Upload/2004_Pack/link.gif">
<img src="images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
向右滾動：
<base href="http://www.">
<div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
<img src="images/link/flashempire.gif"><img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif"><img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2004_Pack/logo.gif"><img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif"><img src="/Upload/2004_Pack/link.gif">
<img src="images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
|
