js+div實現(xiàn)圖片滾動效果代碼
橫向
<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>
<!--滾動的javascript-->
<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>
<!--滾動的javascript結(jié)束-->
縱向
<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>
<!--滾動的javascript-->
<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><!--滾動的javascript結(jié)束-->
</div>
相關(guān)文章
JS中的hasOwnProperty()和isPrototypeOf()屬性實例詳解
hasOwnProperty()和isPrototypeOf()這兩個屬性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf(),下面給大家介紹這兩個屬性的方法和使用,一起看下吧2016-08-08JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能及使用探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能使用探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01jquery根據(jù)錨點offset值實現(xiàn)動畫切換
點擊后僵硬的切換是不是很不爽,下面為大家介紹的是根據(jù)錨點offset值來實現(xiàn)動畫切換,喜歡的朋友不要錯過2014-09-09JavaScript中5種調(diào)用函數(shù)的方法
這篇文章主要介紹了JavaScript中5種調(diào)用函數(shù)的方法,本文詳細的介紹了Javascript中各種函數(shù)調(diào)用的方法及其原理,對于理解JavaScript的函數(shù)有很大的幫助,需要的朋友可以參考下2015-03-03javascript在當前窗口關(guān)閉前檢測窗口是否關(guān)閉
檢測窗口是否關(guān)閉,在當前窗口關(guān)閉前使用js做到這一點,下面是具體的實現(xiàn),感興趣的朋友可以參考下2014-09-09javascript讀取Xml文件做一個二級聯(lián)動菜單示例
這篇文章主要介紹了使用javascript中讀取Xml文件做成的一個二級聯(lián)動菜單,需要的朋友可以參考下2014-03-03