圖片無縫滾動代碼(向左/向下/向上)
更新時間：2013年04月10日 16:15:17 作者：
想必大家都注意到marquee的不循環(huán)滾動,所以出現(xiàn)了很多替代腳本，接下來為大家詳細介紹下：向左滾動/圖片左無縫滾動/向下滾動/圖片下無縫滾動/向上滾動的實現(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āng)滾動至demo1與demo2的交界處時直接跳回初始位置，因為demo1與demo2一樣，所以分不出跳動的瞬間，從而達到“無縫”滾動的目的。
在原作者的基礎(chǔ)上做了一定修改，主要還是在樣式上面，將表格更換為標(biāo)簽。并且將JavaScript標(biāo)準化，可以在所有瀏覽器運行。
先了解一下對象的幾個的屬性： 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)移上時清除定時器達到滾動停止的目的
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)移上時清除定時器達到滾動停止的目的
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實現(xiàn)搜索框的自動完成功能(一)
在很多需要搜索的網(wǎng)站, 都會有一個自動完成的搜索框. 方便用戶查找他們想要的搜索詞. 幫助用戶快速找到自己想要的結(jié)果.接下來通過本文給大家介紹JavaScript實現(xiàn)搜索框的自動完成功能(一)，需要的朋友參考下吧2016-02-02
關(guān)于JavaScript使用export和import的兩個報錯解決
說來慚愧es6寫了這么久,連最基本的export和import都沒搞明白,下面這篇文章主要給大家介紹了關(guān)于JavaScript使用export和import的兩個報錯的解決方法,需要的朋友可以參考下2022-07-07
javascript中innerHTML 獲取或替換html內(nèi)容的實現(xiàn)代碼
這篇文章主要介紹了javascript中innerHTML 獲取或替換html內(nèi)容,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-03-03
JavaScript鼠標(biāo)事件,點擊鼠標(biāo)右鍵,彈出div的簡單實例
下面小編就為大家?guī)硪黄狫avaScript鼠標(biāo)事件,點擊鼠標(biāo)右鍵,彈出div的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要給大家介紹了關(guān)于怎么使用js計算當(dāng)前一周的日期的相關(guān)資料,我們可以使用JavaScript的Date對象來獲取近一周的日期,文中給出了詳細的代碼示例,需要的朋友可以參考下2023-09-09
用javascript實現(xiàn)分割提取頁面所需內(nèi)容
用javascript實現(xiàn)分割提取頁面所需內(nèi)容...2007-05-05
控制臺報錯:Cannot?access?'xxx'?before?initializatio
這篇文章主要給大家介紹了關(guān)于控制臺報錯:Cannot?access?'xxx'?before?initialization的解決方法,文中通過代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
記得幾年前剛接觸前端的時候，覺得能在網(wǎng)頁上拖移元素是一件很爽的事，能寫一段這樣的代碼是件很了不起的事情，于是乎google,baidu蠻多代碼來學(xué)習(xí)，大致明白了思路，總結(jié)如下2010-12-12
這篇文章主要為大家詳細介紹了javascript隨機生成26個大小寫字母，感興趣的朋友可以參考一下2016-02-02
JS數(shù)據(jù)結(jié)構(gòu)之隊列結(jié)構(gòu)詳解
這篇文章主要為大家詳細介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法中的隊列結(jié)構(gòu)，文中通過簡單的示例介紹了隊列結(jié)構(gòu)的原理與實現(xiàn)，需要的可以參考一下2022-11-11