| 代碼如下 |
複製代碼 |
|
<script type="text/javascript">
function scrollOneStep(obj)
{
var ul = document.getElementById(obj);
var li = ul.getElementsByTagName("li");
var li_move = li.item(0);
var line = 0 - parseInt(li_move.clientHeight);
var speed = 10;
var pix = 0;
t2 = setInterval(function(){
if(pix > line){
ul.style.top = ""+pix + "px";
pix --;
}else{
clearInterval(t2);
}
},speed);
ul.style.top += parseInt(ul.style.top)+30+"px";
ul.removeChild(li_move);
ul.appendChild(li_move);
ul.style.top = "0"
}
function scroll(obj)
{
var t= setInterval(function(){scrollOneStep(obj);},1000);
}
</script> |
在本例中如果需要單行滾動，只需要把css中#div1的值改為18即可。
註：經測試相容Ie6、7、8，FF以及Google瀏覽器！
| 代碼如下 |
複製代碼 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新聞列表單行滾動js效果，者多行滾動js效果，超簡潔</title>
<style>
a{display:block;line-height:18px;text-decoration:none;color:#f00;font-family:Arial;font-size:12px;}
a:hover{text-decoration:underline;}
.shell{width:220px; }
#div1{height:72px;overflow:hidden;}
</style>
</head>
<body>
<div class="shell">
<div id="div1">
<a href="/js">1jQuery的圖片滾動切換外掛程式</a>
<a href="/js">2Mootools slider 捲軸拖動取值的實現 </a>
<a href="/js">3VB開發的Eclipse編程軟體完整版</a>
<a href="/js">4VC++產生隨機數並快速排序的演算法</a>
<a href="/js">5VB語音報數計算機來源程式</a>
<a href="/js">6jQuery的圖片滾動切換外掛程式</a>
<a href="/js">7Mootools slider 捲軸拖動取值的實現 </a>
<a href="/js">8VB開發的Eclipse編程軟體完整版</a>
<a href="/js">9VC++產生隨機數並快速排序的演算法</a>
</div>
<div>
<p>修改說明：#div1裡的高度（72px）即是你需要顯示的行數<br/>
js裡的18即是要滾動的行高；1500即是每次滾動所需要的時間，越大則速度越慢！
<a href="/js">Js大全</a>注！<p/>
</body>
<script>
var c,_=Function;
with(o=document.getElementById("div1")){ innerHTML+=innerHTML; onmouseover=_("c=1"); onmouseout=_("c=0");}
(F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1500);".replace(/#/g,"o.scrollTop")))();
</script>
</html> |
本效果是完全基於JavaScript的，使用時候最好另存一個新檔案，然後引入，這樣方便一些。
| 代碼如下 |
複製代碼 |
|
<html>
<head>
<title>文字滾動</title>
<style type="text/css">
body{font-size:12px}
a {text-decoration: none;}
</style>
</head>
<body>
<script>
var marqueeContent=new Array();
marqueeContent[0]='<font color="#0000CC">14:25 </font><a href=http://www.baidu.com target=_blank class="f12red">jQuery 動態載入靜態網頁的執行個體</a><br>';
marqueeContent[1]='<font color="#0000CC">14:25 </font><a href=/ target=_blank class="f12red">比較炫的JavaScript圖片展示特效</a><br>';
marqueeContent[2]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">JQuery模仿的LightBox圖片效果</a><br>';
marqueeContent[3]='<font color="#0000CC">14:25 </font><a href=# target=_blank class="f12red">C#酒店管理系統（VS2008+SQL2005）</a><br>';
var marqueeInterval=new Array();
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=18;
function initMarquee() {
var str=marqueeContent[0];
document.write('<div id=marqueeBox style="overflow:hidden;height:'+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval('startMarquee()',marqueeDelay)"><div>'+str+'</div></div>');
marqueeId++;
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function startMarquee() {
var str=marqueeContent[marqueeId];
marqueeId++;
if(marqueeId>=marqueeContent.length) marqueeId=0;
if(marqueeBox.childNodes.length==1) {
var nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
marqueeBox.appendChild(nextLine);
}
else {
marqueeBox.childNodes[0].innerHTML=str;
marqueeBox.appendChild(marqueeBox.childNodes[0]);
marqueeBox.scrollTop=0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
function scrollMarquee() {
marqueeBox.scrollTop++;
if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
initMarquee();
</script>
</body>
</html> |
