几种JS滚动代码

May 9

网络知识

在前几个月的时候,想修改z-blog,搜索到几个JS滚动代码,感觉不错,发上来共享给大家.

第一种:

<div id="marquees">
  <a href="#">你可曾有过无数的梦想</a><br><br>
  <a href="#">却在时光的流逝里幻灭</a><br><br>
  <a href="#">你可曾对未来期待憧憬</a><br><br>
  <a href="#">却在成长的岁月中迷失</a><br><br>
</div> 
<script language="JavaScript">
marqueesHeight=200;
stopscroll=false;
with(marquees){
  style.width=0;
  style.height=marqueesHeight;
  style.overflowX="visible";
  style.overflowY="hidden";
  noWrap=true;
  onmouseover=new Function("stopscroll=true");
  onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

preTop=0; currentTop=0; 

function init(){
  templayer.innerHTML="";
  while(templayer.offsetHeight<marqueesHeight){
    templayer.innerHTML+=marquees.innerHTML;
  }
  marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
  setInterval("scrollUp()",50);
}
document.body.onload=init;

function scrollUp(){
  if(stopscroll==true) return;
  preTop=marquees.scrollTop;
  marquees.scrollTop+=1;
  if(preTop==marquees.scrollTop){
    marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
    marquees.scrollTop+=1;
  }
}
</script>

第二种(图片):

<base href=" ">
 <div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff>
 <div id=demo1>
 <img src="images1">
 <img src="images2">
 <img src="images3">
 </div>
 <div id=demo2></div>
 </div>
<script>
   var speed=30
   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>   
  <div   style="width:200px;height:100px;overflow:hidden">   
  <div   id="scroll"   style="position:relative;top:0px">   
  <table   border="1">   
  <tr><td>111</td><td>222</td><td>333</td></tr>   
  <tr><td>111</td><td>222</td><td>333</td></tr>   
  <tr><td>111</td><td>222</td><td>333</td></tr>   
  <tr><td>111</td><td>222</td><td>333</td></tr>   
  <tr><td>111</td><td>222</td><td>333</td></tr>   
  <tr><td>111</td><td>222</td><td>333</td></tr>   
  <tr><td>111</td><td>222</td><td>333</td></tr>   
  <tr><td>111</td><td>222</td><td>333</td></tr>   
  <tr><td>111</td><td>222</td><td>333</td></tr>   
  <tr><td>111</td><td>222</td><td>333</td></tr>   
  <tr><td>111</td><td>222</td><td>333</td></tr>   
  </table>   
  </div>   
  </div>   
  <script   type="text/javascript">   
  var   obj=document.getElementById("scroll");   
  var   scrollUnit=1;   //滚动高度   
  var   interval=100;   //时间间隔   
  setTimeout(scroll,interval);   
  function   scroll()   
  {   
  obj.style.pixelTop-=scrollUnit;   
  setTimeout(scroll,interval);   
  }   
  </script>   
  </body>

第四种(隔一段时间向上滚动):

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
#icefable1 {
 MARGIN-TOP: 2px; BACKGROUND: #494c6e; COLOR: #ffff00; LINE-HEIGHT: 26px; HEIGHT: 26px; TEXT-DECORATION: none
}
#icefable1 DIV {
 PADDING-LEFT: 30px; BACKGROUND: url(../images/index/point_style_00.gif) no-repeat 12px 4px; WIDTH: 350px
}
#icefable1 A:hover {
 COLOR: #656a82; LINE-HEIGHT: 26px
}
</style>
</head>
<body>
<DIV id=icefable1>
 <DIV>欢迎访问<a href="<a href="http://webym.cn/blog" target="_blank">http://webym.cn/blog</a>" target="_blank"><a href="http://webym.cn/blog" target="_blank">http://webym.cn/blog</a></a></DIV>
 <DIV>aidli.com/bbs地理论坛诚征版主中...</DIV>
 <DIV>邮箱： yangzhy@163.com</DIV>
 <DIV>广告合作:QQ164890072</A>
 </DIV>
</DIV>
<SCRIPT>
 marqueesHeight=26;
 stopscroll=false;
 with(icefable1)
 {
  style.width=0;
  style.height=marqueesHeight;
  style.overflowX="visible";
  style.overflowY="hidden";
  noWrap=true;
  onmouseover=new Function("stopscroll=true");
  onmouseout=new Function("stopscroll=false");
 }
 preTop=0;
 currentTop=marqueesHeight;
 stoptime=0;
 icefable1.innerHTML+=icefable1.innerHTML;

 function init_srolltext()
 {
  icefable1.scrollTop=0;
  setInterval("scrollUp()",1);
 }
 init_srolltext();
 
 function scrollUp()
 {
  if(stopscroll==true) return;
  currentTop+=1;
  if(currentTop==marqueesHeight+1)
  {
   stoptime+=1;
   currentTop-=1;
   if(stoptime==300) 
   {
    currentTop=0;
    stoptime=0;    
   }
  }
  else 
  {   
   preTop=icefable1.scrollTop;
   icefable1.scrollTop+=1;
   if(preTop==icefable1.scrollTop)
   {
    icefable1.scrollTop=marqueesHeight;
    icefable1.scrollTop+=1;   
   }
  }    
 }
 init_srolltext();    
</SCRIPT>
</body>
</html>

第五种(foxss提供z-blog滚动友情连接代码):

把default.html、single.html、catalog.html、search.html、tags.html(如果这几个文件里有)的
<div class="function" id="divLinkage">
<h3><#ZC_MSG031#></h3>
<ul>
<#CACHE_INCLUDE_LINK#>
</ul>
</div>
改成
<div class="function" id="divLinkage">
<h3><#ZC_MSG031#></h3>
</div>
<div id="up1" style="overflow:hidden;height:60px;margin:5px"><div id="up2">
<div class="function" id="divLinkage">
<ul>
<#CACHE_INCLUDE_LINK#>
</ul>
</div>
</div><div id="up3"> </div></div>
<script>
<!--
var speed=30; //数字越大速度越慢
var tab=document.getElementById("up1");
var tab1=document.getElementById("up2");
var tab2=document.getElementById("up3");
tab2.innerHTML=tab1.innerHTML; 
function Marquee1(){
if(tab2.offsetTop-tab.scrollTop<=0)
tab.scrollTop-=tab1.offsetHeight 
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee1,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee1,speed)};
-->
</script>

tags:js 滚动代码 z-blog

to "几种JS滚动代码"

Yimi Says:
2008-5-11 13:05:18 回复该留言
好东西，收藏了
alex Says:
2008-5-11 14:58:50 回复该留言
还是生成个JS文件,调用好点.
happy浪客于 2008-5-13 11:42:03 回复
呵呵,只是共享给大家,所以做成什么文件,大家自己决定...

立志林IT博客

几种JS滚动代码

to "几种JS滚动代码"

Leave a Reply

网站分类

最新评论及回复

文章归档

Meta

立志林IT博客

几种JS滚动代码

if(2==0){document.write("No Response")}else{if(2==1){document.write("One Response")}else{document.write("2 Responses")}}; to "几种JS滚动代码"

Leave a Reply

网站分类

最新评论及回复

文章归档

Meta

to "几种JS滚动代码"