JS實(shí)現(xiàn)超精簡的鏈接列表在固定區(qū)域內(nèi)滾動效果代碼
本文實(shí)例講述了JS實(shí)現(xiàn)超精簡的鏈接列表在固定區(qū)域內(nèi)滾動效果代碼。分享給大家供大家參考,具體如下:
這款超精簡版的鏈接列表文字滾動代碼,可在指定的區(qū)域內(nèi)滾動,當(dāng)然,區(qū)域大小可以自己設(shè)置的。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-link-list-scroll-style-codes/
具體代碼如下:
<html> <HEAD> <TITLE>文字鏈接列表滾動</TITLE> <META content="text/html; charset=gb2312" http-equiv=Content-Type> <STYLE type=text/css> #demo a { width:100%; overflow:hidden; font:12px/16px tahoma; display:block; text-decoration:none; margin:2px; color:#4a551c; padding-left:2px; text-align:left; } #demo a:hover { color:#ff6600; } </STYLE> </HEAD> <body> <div id="demo" style="overflow:hidden;height:132px;width:350px; border:1px solid #dde5bc;"> <div id="demo1"> <a href="#">多彩的電腦機(jī)箱圖標(biāo),很多顏色和風(fēng)格……</a> <a href="#">地方稅務(wù)局網(wǎng)站建設(shè)方案 ……</a> <a href="#">獲得系統(tǒng)內(nèi)存,并以圓餅圖表現(xiàn)百分比……</a> <a href="#">多彩的電腦機(jī)箱圖標(biāo),很多顏色和風(fēng)格……</a> <a href="#">完全兼容IE, FF, Opera, 其它的還未經(jīng)測試……</a> <a href="#">地方稅務(wù)局網(wǎng)站建設(shè)方案 ……</a> <a href="#">多彩的電腦機(jī)箱圖標(biāo),很多顏色和風(fēng)格……</a> <a href="#">地方稅務(wù)局網(wǎng)站建設(shè)方案 ……</a> <a href="#">完全兼容IE, FF, Opera, 其它的還未經(jīng)測試……</a> <a href="#">獲得系統(tǒng)內(nèi)存,并以圓餅圖表現(xiàn)百分比……</a> <a href="#">完全兼容IE, FF, Opera, 其它的還未經(jīng)測試……</a> <a href="#">獲得系統(tǒng)內(nèi)存,并以圓餅圖表現(xiàn)百分比……</a> </div> <div id="demo2"></div> </div> <script> var speed=40 var demo=document.getElementById("demo"); var demo2=document.getElementById("demo2"); var demo1=document.getElementById("demo1"); demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetTop-demo.scrollTop<=0) demo.scrollTop-=demo1.offsetHeight else{ demo.scrollTop++ } } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> </body> </html>
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript中in和hasOwnProperty區(qū)別詳解
in操作符只要通過對象能訪問到屬性就返回true。hasOwnProperty()只在屬性存在于實(shí)例中時才返回true。下面通過本文給大家分享JavaScript中in和hasOwnProperty區(qū)別詳解,感興趣的朋友一起看看吧2017-08-08使用JavaScript實(shí)現(xiàn)輪播圖效果完整實(shí)例
我們在各種網(wǎng)頁中經(jīng)常見到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實(shí)現(xiàn)輪播圖效果的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01注意 JavaScript 中 RegExp 對象的 test 方法
注意 JavaScript 中 RegExp 對象的 test 方法...2007-01-01html+js實(shí)現(xiàn)動態(tài)顯示本地時間
顯示本地時間的方法有很多,在本文將為大家介紹下如何使用html+js實(shí)現(xiàn)動態(tài)顯示本地時間,感興趣的朋友可以了解下2013-09-09一百行JS代碼實(shí)現(xiàn)一個校驗(yàn)工具
這篇文章主要介紹了一百行JS代碼實(shí)現(xiàn)一個校驗(yàn)工具,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04