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