div+css的圖片滾動效果

想必大家都注意到<marquee>的不迴圈滾動，所以出現了很多替代指令碼，或iframe或JS輸出<marquee>，不管怎麼做，都略顯麻煩。下面說一下這個相對簡單的實現思路：一個設定寬度並且隱藏超出它寬度的內容的容器demo，裡面放demo1和demo2，demo1是滾動內容,demo2為demo1的直接複製，通過不斷改變demo1的scrollTop或者scrollLeft達到滾動的目的，當滾動至demo1與demo2的交界處時直接跳回初始位置，因為demo1與demo2一樣，所以分不出跳動的瞬間，從而達到“無縫”滾動的目的。在原作者的基礎上做了一定修改，主要還是在樣式上面，將表格更換為標籤。先瞭解一下對象的幾個的屬性：innerHTML:設定或擷取位於對象起始和結束標籤內的 HTMLscrollHeight: 擷取對象的滾動高度。scrollLeft:設定或擷取位於對象左邊界和視窗中目前可見內容的最左端之間的距離scrollTop:設定或擷取位於對象最頂端和視窗中可見內容的最頂端之間的距離scrollWidth:擷取對象的滾動寬度offsetHeight:擷取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的高度offsetLeft:擷取對象相對於版面或由 offsetParent 屬性指定的父座標的計算左側位置offsetTop:擷取對象相對於版面或由 offsetTop 屬性指定的父座標的計算頂端位置 offsetWidth:擷取對象相對於版面或由父座標 offsetParent 屬性指定的父座標的寬度圖片上無縫滾動<style type="text/css">
<!--
#demo {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    height: 100px;
    text-align: center;
    float: left;
}
#demo img {
    border: 3px solid #F2F2F2;
    display: block;
}
-->
</style>
向上滾動
<div id="demo">
<div id="demo1">
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //數字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;          //複製demo1為demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//當滾動至demo1與demo2交界時
tab.scrollTop-=tab1.offsetHeight  //demo跳到最頂端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab. {clearInterval(MyMar)};//滑鼠移上時清除定時器達到滾動停止的目的
tab. {MyMar=setInterval(Marquee,speed)};//滑鼠移開時重設定時器
-->
</script> 圖片下無縫滾動<style type="text/css">
<!--
#demo {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    height: 100px;
    text-align: center;
    float: left;
}
#demo img {
    border: 3px solid #F2F2F2;
    display: block;
}
-->
</style>
向下滾動
<div id="demo">
<div id="demo1">
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //數字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;          //複製demo1為demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//當滾動至demo1與demo2交界時
tab.scrollTop+=tab2.offsetHeight  //demo跳到最頂端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab. {clearInterval(MyMar)};//滑鼠移上時清除定時器達到滾動停止的目的
tab. {MyMar=setInterval(Marquee,speed)};//滑鼠移開時重設定時器
-->
</script> 圖片左無縫滾動<style type="text/css">
<!--
#demo {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    width: 500px;
}
#demo img {
    border: 3px solid #F2F2F2;
}
#indemo {
    float: left;
    width: 800%;
}
#demo1 {
    float: left;
}
#demo2 {
    float: left;
}
-->
</style>
向左滾動
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //數字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab. {clearInterval(MyMar)};
tab. {MyMar=setInterval(Marquee,speed)};
-->
</script> 圖片右無縫滾動<style type="text/css">
<!--
#demo {
    background: #FFF;
    overflow:hidden;
    border: 1px dashed #CCC;
    width: 500px;
}
#demo img {
    border: 3px solid #F2F2F2;
}
#indemo {
    float: left;
    width: 800%;
}
#demo1 {
    float: left;
}
#demo2 {
    float: left;
}
-->
</style>
向右滾動
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src=" http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //數字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed);
tab. {clearInterval(MyMar)};
tab. {MyMar=setInterval(Marquee,speed)};
-->
</script>