JS實(shí)現(xiàn)超精簡(jiǎn)的鏈接列表在固定區(qū)域內(nèi)滾動(dòng)效果代碼
本文實(shí)例講述了JS實(shí)現(xiàn)超精簡(jiǎn)的鏈接列表在固定區(qū)域內(nèi)滾動(dòng)效果代碼。分享給大家供大家參考,具體如下:
這款超精簡(jiǎn)版的鏈接列表文字滾動(dòng)代碼,可在指定的區(qū)域內(nèi)滾動(dòng),當(dāng)然,區(qū)域大小可以自己設(shè)置的。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-link-list-scroll-style-codes/
具體代碼如下:
<html> <HEAD> <TITLE>文字鏈接列表滾動(dòng)</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)測(cè)試……</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)測(cè)試……</a> <a href="#">獲得系統(tǒng)內(nèi)存,并以圓餅圖表現(xiàn)百分比……</a> <a href="#">完全兼容IE, FF, Opera, 其它的還未經(jīng)測(cè)試……</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>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- JS實(shí)現(xiàn)超精簡(jiǎn)響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼
- JS短路原理的應(yīng)用示例 精簡(jiǎn)代碼的途徑
- 一個(gè)精簡(jiǎn)的JS DIV層tab切換代碼
- JS、CSS文字切換,定時(shí)交替,代碼精簡(jiǎn)
- javascript 短路法代碼精簡(jiǎn)
- 代碼精簡(jiǎn)的可以實(shí)現(xiàn)元素圓角的js函數(shù)
- 比較精簡(jiǎn)的Javascript拖動(dòng)效果函數(shù)代碼
- 利用JScript中運(yùn)算符"||"和"&&"的特殊特性實(shí)現(xiàn)代碼精簡(jiǎn)
- 讓JavaScript代碼更加精簡(jiǎn)的方法技巧
相關(guān)文章
JavaScript不同場(chǎng)景下的文件下載方案詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中不同場(chǎng)景下的三種常見(jiàn)文件下載方案,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-12-12JavaScript中in和hasOwnProperty區(qū)別詳解
in操作符只要通過(guò)對(duì)象能訪問(wèn)到屬性就返回true。hasOwnProperty()只在屬性存在于實(shí)例中時(shí)才返回true。下面通過(guò)本文給大家分享JavaScript中in和hasOwnProperty區(qū)別詳解,感興趣的朋友一起看看吧2017-08-08使用JavaScript實(shí)現(xiàn)輪播圖效果完整實(shí)例
我們?cè)诟鞣N網(wǎng)頁(yè)中經(jīng)常見(jiàn)到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實(shí)現(xiàn)輪播圖效果的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01注意 JavaScript 中 RegExp 對(duì)象的 test 方法
注意 JavaScript 中 RegExp 對(duì)象的 test 方法...2007-01-01html+js實(shí)現(xiàn)動(dòng)態(tài)顯示本地時(shí)間
顯示本地時(shí)間的方法有很多,在本文將為大家介紹下如何使用html+js實(shí)現(xiàn)動(dòng)態(tài)顯示本地時(shí)間,感興趣的朋友可以了解下2013-09-09一百行JS代碼實(shí)現(xiàn)一個(gè)校驗(yàn)工具
這篇文章主要介紹了一百行JS代碼實(shí)現(xiàn)一個(gè)校驗(yàn)工具,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04