js+div實(shí)現(xiàn)圖片滾動(dòng)效果代碼
橫向
<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>
<!--滾動(dòng)的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>
<!--滾動(dòng)的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>
<!--滾動(dòng)的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><!--滾動(dòng)的javascript結(jié)束-->
</div>
- 常用JS圖片滾動(dòng)(無縫、平滑、上下左右滾動(dòng))代碼大全(推薦)
- 解析javascript瀑布流原理實(shí)現(xiàn)圖片滾動(dòng)加載
- js實(shí)現(xiàn)鼠標(biāo)經(jīng)過時(shí)圖片滾動(dòng)停止的方法
- js圖片滾動(dòng)效果時(shí)間可隨意設(shè)定當(dāng)鼠標(biāo)移上去時(shí)停止
- JS簡(jiǎn)單的輪播的圖片滾動(dòng)實(shí)例
- js實(shí)現(xiàn)網(wǎng)站首頁圖片滾動(dòng)顯示
- javascript 另一種圖片滾動(dòng)切換效果思路
- javascript 不間斷的圖片滾動(dòng)并可點(diǎn)擊
- js實(shí)現(xiàn)圖片推拉門效果代碼實(shí)例
相關(guān)文章
JS中的hasOwnProperty()和isPrototypeOf()屬性實(shí)例詳解
hasOwnProperty()和isPrototypeOf()這兩個(gè)屬性都是Object.prototype所提供:Object.prototype.hasOwnProperty()和Object.prototype.isPropertyOf(),下面給大家介紹這兩個(gè)屬性的方法和使用,一起看下吧2016-08-08JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能及使用探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速探索Draft-js?emoji插件功能使用探究,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01jquery根據(jù)錨點(diǎn)offset值實(shí)現(xiàn)動(dòng)畫切換
點(diǎn)擊后僵硬的切換是不是很不爽,下面為大家介紹的是根據(jù)錨點(diǎn)offset值來實(shí)現(xiàn)動(dòng)畫切換,喜歡的朋友不要錯(cuò)過2014-09-09原生JS實(shí)現(xiàn)首頁進(jìn)度加載動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)首頁進(jìn)度加載動(dòng)畫,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09JavaScript中5種調(diào)用函數(shù)的方法
這篇文章主要介紹了JavaScript中5種調(diào)用函數(shù)的方法,本文詳細(xì)的介紹了Javascript中各種函數(shù)調(diào)用的方法及其原理,對(duì)于理解JavaScript的函數(shù)有很大的幫助,需要的朋友可以參考下2015-03-03javascript在當(dāng)前窗口關(guān)閉前檢測(cè)窗口是否關(guān)閉
檢測(cè)窗口是否關(guān)閉,在當(dāng)前窗口關(guān)閉前使用js做到這一點(diǎn),下面是具體的實(shí)現(xiàn),感興趣的朋友可以參考下2014-09-09javascript讀取Xml文件做一個(gè)二級(jí)聯(lián)動(dòng)菜單示例
這篇文章主要介紹了使用javascript中讀取Xml文件做成的一個(gè)二級(jí)聯(lián)動(dòng)菜單,需要的朋友可以參考下2014-03-03electron中獲取mac地址的實(shí)現(xiàn)示例
在基于Electron的應(yīng)用中,有一個(gè)業(yè)務(wù)需求是獲取物理網(wǎng)卡的Mac地址以用于客戶機(jī)唯一性識(shí)別,本文主要介紹了electron中獲取mac地址的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12