快捷導(dǎo)航

js+div實(shí)現(xiàn)圖片滾動(dòng)效果代碼

更新時(shí)間：2014年02月10日 09:10:10 作者：

本篇文章主要是對(duì)js+div實(shí)現(xiàn)圖片滾動(dòng)效果的示例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助

橫向
<div id=demo style="overflow:hidden;width:200px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();"

onmouseout="doscroll()">
<div id="demo1" style="white-space:nowrap;padding:0;">
<a href="javascript:alert('發(fā)表新貼');"><img src="圖片URL" height=20 width=104

border=0></a>
<a href="javascript:alert('發(fā)表回復(fù)');"><img src="圖片URL" height=20 width=104

border=0></a>
</div>
</div>

<script>
var t=demo.scrollWidth
demo1.innerHTML+=demo1.innerHTML
function doMarquee()
{
demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth
}
function doscroll()
{
sc=setInterval(doMarquee,20)
}
function stopscroll()
{
clearInterval(sc)
}
doscroll()
</script>

縱向
<div id="demo" style="height:110px; overflow:hidden ">
<div id="demo1">
<a href="javascript:alert('發(fā)表新貼');"><img src="圖片URL" height=20 width=104

border=0></a>
<a href="javascript:alert('發(fā)表回復(fù)');"><img src="圖片URL" height=20 width=104

border=0></a>
</div><div id="demo2"></div>

<script>
var speed=100
demo2.innerHTML=demo1.innerHTML
function Marquees(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMars=setInterval(Marquees,speed)
demo.onmouseover=function() { clearInterval(MyMars) }
demo.onmouseout=function() { MyMars=setInterval(Marquees,speed) }
zlselect('6');
</script>
</div>

您可能感興趣的文章:

相關(guān)文章

JavaScript Dom 綁定事件操作實(shí)例詳解
這篇文章主要介紹了JavaScript Dom 綁定事件操作,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript實(shí)現(xiàn)dom綁定事件的相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
2019-10-10
JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例
這篇文章主要介紹了JS Array.from()將偽數(shù)組轉(zhuǎn)換成數(shù)組的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
javascript常用的設(shè)計(jì)模式
本文主要介紹了javascript常用的設(shè)計(jì)模式:單例模式;工廠模式;適配模式;外觀模式。下面跟著小編一起來看下吧
2017-02-02
原生JS實(shí)現(xiàn)日歷組件的示例代碼
本篇文章主要介紹了原生JS實(shí)現(xiàn)日歷組件的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
基于Phantomjs生成PDF的實(shí)現(xiàn)方法
這篇文章主要介紹了基于Phantomjs生成PDF的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了Phantomjs結(jié)合nodejs生成pdf的操作步驟與相關(guān)技巧,需要的朋友可以參考下
2016-11-11
JavaScript 數(shù)組遍歷的五種方法
這篇文章主要介紹了JavaScript 數(shù)組遍歷的五種方法，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下
2021-03-03
javascript使用shift+click實(shí)現(xiàn)選擇和反選checkbox的方法
這篇文章主要介紹了javascript使用shift+click實(shí)現(xiàn)選擇和反選checkbox的方法,涉及javascript針對(duì)鍵盤按鍵的判斷及checkbox的操作技巧,需要的朋友可以參考下
2015-05-05
console.log的輸出語句如何使用
這篇文章主要介紹了關(guān)于console.log的輸出語句如何使用問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
firefox插件Firebug的使用教程
Firebug是Firefox下的一款開發(fā)類插件，現(xiàn)屬于Firefox的五星級(jí)強(qiáng)力推薦插件之一。
2010-01-01
詳解在微信小程序的JS腳本中使用Promise來優(yōu)化函數(shù)處理
這篇文章主要介紹了詳解在微信小程序的JS腳本中使用Promise來優(yōu)化函數(shù)處理，引入Promise確實(shí)能夠很好的解決異步回調(diào)函數(shù)的可讀性等問題，同時(shí)也使得我們調(diào)用的時(shí)候代碼簡潔一些，本文介紹如何在小程序的JS代碼里面使用Promise來封裝一些函數(shù)的做法
2019-03-03