圖片無縫滾動代碼(向左/向下/向上)
更新時間：2013年04月10日 16:15:17 作者：
想必大家都注意到marquee的不循環(huán)滾動,所以出現(xiàn)了很多替代腳本，接下來為大家詳細(xì)介紹下：向左滾動/圖片左無縫滾動/向下滾動/圖片下無縫滾動/向上滾動的實現(xiàn)
想必大家都注意到<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á)到“無縫”滾動的目的。
在原作者的基礎(chǔ)上做了一定修改，主要還是在樣式上面，將表格更換為標(biāo)簽。并且將JavaScript標(biāo)準(zhǔn)化，可以在所有瀏覽器運行。
先了解一下對象的幾個的屬性： 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)的寬度
復(fù)制代碼 代碼如下:
圖片上無縫滾動
<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; //數(shù)字越大速度越慢
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)//當(dāng)滾動至demo1與demo2交界時
tab.scrollTop-=tab1.offsetHeight //demo跳到最頂端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠標(biāo)移上時清除定時器達(dá)到滾動停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠標(biāo)移開時重設(shè)定時器
-->
</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; //數(shù)字越大速度越慢
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)//當(dāng)滾動至demo1與demo2交界時
tab.scrollTop+=tab2.offsetHeight //demo跳到最頂端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠標(biāo)移上時清除定時器達(dá)到滾動停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠標(biāo)移開時重設(shè)定時器
-->
</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; //數(shù)字越大速度越慢
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.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {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; //數(shù)字越大速度越慢
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.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
相關(guān)文章
這篇文章主要介紹了JavaScript函數(shù)的使用教程，JavaScript函數(shù)是被設(shè)計為執(zhí)行特定任務(wù)的代碼塊。JavaScript函數(shù)會在某代碼調(diào)用它時被執(zhí)行。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
javascript實現(xiàn)的一個帶下拉框功能的文本框
這篇文章主要介紹了javascript實現(xiàn)的一個帶下拉框功能的文本框,需要的朋友可以參考下2014-05-05
一般參數(shù)值不能超過16位,如果超出16都是用0替代,導(dǎo)致我們查詢不到自己想要的結(jié)果,這篇文章主要給大家介紹了關(guān)于JS超出精度數(shù)字問題的解決方法,需要的朋友可以參考下2021-07-07
獲取瀏覽器名稱及版本信息,如果當(dāng)前瀏覽器是IE，彈出瀏覽器版本,否則彈出當(dāng)前瀏覽器名稱和版本，詳細(xì)實現(xiàn)代碼請參考本文2013-04-04
JavaScript中子函數(shù)訪問外部變量的3種解決方法
任何在函數(shù)中定義的變量,都可認(rèn)為是私有變量,因為不能在函數(shù)外部訪問這些變量,這篇文章主要給大家介紹了關(guān)于JavaScript中子函數(shù)訪問外部變量的3種解決方法,需要的朋友可以參考下2021-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)保存影集和圖片到相冊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
js類型轉(zhuǎn)換與引用類型詳解(Boolean_Number_String)
本篇文章主要是對js中的類型轉(zhuǎn)換與引用類型(Boolean_Number_String)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
本篇文章主要是對js/jquery獲取文本框輸入焦點的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
這篇文章主要為大家詳細(xì)介紹了ionic環(huán)境配置及問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了ES11屢試不爽的新特性,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10