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)景下的三種常見文件下載方案,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2023-12-12
JavaScript中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)常見到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實(shí)現(xiàn)輪播圖效果的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
注意 JavaScript 中 RegExp 對(duì)象的 test 方法
注意 JavaScript 中 RegExp 對(duì)象的 test 方法...2007-01-01
html+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

