背景: #EDF0F5 #FAFBE6 #FFF2E2 #FDE6E0 #F3FFE1 #DAFAF3 #EAEAEF 默认  
阅读新闻

图片滚动特效

[日期:2005-11-14] 来源:  作者: [字体: ]

图片滚动到一定位置后停顿一会儿,然后再向上滚动,循环不间断。

代码:

<div id="icefable1">
<!--插入你的图片链接-->

<script>marqueesHeight=115;
stopscroll=false;
with(icefable1){
   style.width=640;


   style.height=marqueesHeight;
   style.overflowX="visible";
   style.overflowY="hidden";
   noWrap=true;
   onmouseover=new Function("stopscroll=true");
   onmouseout=new Function("stopscroll=false");
  }
  preTop=0; currentTop=115; stoptime=0;
  icefable1.innerHTML+=icefable1.innerHTML;
  

function init_srolltext(){
  icefable1.scrollTop=0;
  setInterval("scrollUp()",20);
}init_srolltext();

function scrollUp(){
  if(stopscroll==true) return;
  currentTop+=1;
  if(currentTop==116)
  {
   stoptime+=1;
   currentTop-=1;
   if(stoptime==114) 
   {
    currentTop=0;
    stoptime=0;    
   }
  }
  else {   
   preTop=icefable1.scrollTop;
   icefable1.scrollTop+=1;
   if(preTop==icefable1.scrollTop){
     icefable1.scrollTop=115;
     icefable1.scrollTop+=1;
     
   }
  }

}
  
            </script>
    </div>


==================================================================
下面是我已经调试好的友情链接,将原{$ShowFriendSite(1,21,7,2)}代码,用下面的代码替换即可:

<!--友情链接滚动代码开始-->
<div id="icefable2">
{$ShowFriendSite(1,21,7,2)}
<script>marqueesHeight=41;
stopscroll=false;
with(icefable2){
   style.width=750;
   style.height=marqueesHeight;
   style.overflowX="visible";
   style.overflowY="hidden";
   noWrap=true;
   onmouseover=new Function("stopscroll=true");
   onmouseout=new Function("stopscroll=false");
  }
  preTop=0; currentTop=41; stoptime=0;
  icefable2.innerHTML+=icefable2.innerHTML;
  

function init_srolltext(){
  icefable2.scrollTop=0;
  setInterval("scrollUp()",50);
}init_srolltext();

function scrollUp(){
  if(stopscroll==true) return;
  currentTop+=1;
  if(currentTop==42)
  {
   stoptime+=1;
   currentTop-=1;
   if(stoptime==40) 
   {
    currentTop=0;
    stoptime=0;    
   }
  }
  else {   
   preTop=icefable2.scrollTop;
   icefable2.scrollTop+=1;
   if(preTop==icefable2.scrollTop){
     icefable2.scrollTop=41;
     icefable2.scrollTop+=1;
     
   }
  }

}
  
</script>
</div>       
<!--友情链接滚动代码结束-->

 

 

=======================================================

还有一种另外的方法

<table width="100%" border="0" cellpadding="4" cellspacing="1" bgcolor="B6B191">
          <tr>
            <td bgcolor="FFFDE8">
              <table width="140" border="0" cellspacing="0" align="center">
      <tr><td>
        <div id="article1" style="width:140;">
          <TABLE cellSpacing="0" cellPadding="0" width="140" border="0">
<tr><td height=40 align=center><a href=http://www.xintiao.net target=_blank><img src=http://www.xintiao.net/logo/1.gif width=88 height=31 border=0></a></td></tr><tr><td height=40 align=center><a href=http://www.xintiao.net target=_blank><img src=http://www.xintiao.net/logo/2.gif width=88 height=31 border=0></a></td></tr><tr><td height=40 align=center><a href=http://www.xintiao.net target=_blank><img src=http://www.xintiao.net/logo/1.gif width=88 height=31 border=0></a></td></tr><tr><td height=40 align=center><a href=http://www.xintiao.net target=_blank><img src=http://www.xintiao.net/logo/2.gif width=88 height=31 border=0></a></td></tr><tr><td height=40 align=center><a href=http://www.xintiao.net target=_blank><img src=http://www.xintiao.net/logo/1.gif width=88 height=31 border=0></a></td></tr><tr><td height=40 align=center><a href=http://www.xintiao.net target=_blank><img src=http://www.xintiao.net/logo/2.gif width=88 height=31 border=0></a></td></tr>          </TABLE>
        </div>
        <div id="article2" style="position:absolute;z-index:1;visibility:hidden"></div>
        </td></tr>
      </table>
<script>
articleHeight=80;
stopscrolla=false;
article1.scrollTop=0;
//more javascript from http://www.xintiao.net
with(article1){
  style.width=0;
  style.height=articleHeight;
  style.overflowX="visible";
  style.overflowY="hidden";
  noWrap=true;
  onmouseover=new Function("stopscrolla=true");
  onmouseout=new Function("stopscrolla=false");
}

preTopa=0; currentTopa=0; stoptimea=0;

function init_srolltext1(){
  article2.innerHTML="";
  article2.innerHTML+=article1.innerHTML;   
  article1.innerHTML=article2.innerHTML+article2.innerHTML;
  setInterval("scrollUp1()",50);
}
function scrollUp1(){
  if(stopscrolla==true) return;
  currentTopa+=1;
  if(currentTopa==40)
  {
   stoptimea+=1;
   currentTopa-=1;
   if(stoptimea==50)
   {
    currentTopa=0;
    stoptimea=0;
   }
  }
  else {  
   preTopa=article1.scrollTop;
   article1.scrollTop+=1;
   if(preTopa==article1.scrollTop){
     article1.scrollTop=article2.offsetHeight-articleHeight;
     article1.scrollTop+=1;
   }
  }

}
init_srolltext1();
</script>

 

=================================================

第一步:把下面的代码放到<head>......</head>处。

<script language="JavaScript">

function start_marquee(div,spd,step){
 obj_marquee = document.getElementById(div);
 marquee_high = parseInt(obj_marquee.style.height);
 marquee_step = marquee_high/step;
 obj_marquee.appendChild(obj_marquee.firstChild.cloneNode(true));
 setInterval ("step_c=1;setTimeout('marquee_show("+step+")',0)", spd*1000);
}
function marquee_show(step){
 obj_marquee.scrollTop += marquee_step;
 if(obj_marquee.scrollTop >= obj_marquee.children[1].offsetTop) {
  obj_marquee.scrollTop = 0;
 }
 if(step_c++ < step) setTimeout("marquee_show("+step+")", 0);
 return;
}
</script>

第二步:确定放置滚动层的位置,在此位置插入一个层(DW:工具→插入层),指定层编号(ID)、宽和高,overflow(溢出)属性设为hidden,在此层内插入一个新层,新层里放置需要滚动的内容,代码示例:

<div id="mydiv" style="position:absolute; width:300; height:150;overflow: hidden">
<div>
内容(可以是表格、图片、文字......
</div>
</div>

第三步:第二步生成的代码下插入以下代码:

<script language="JavaScript">
start_marquee("mydiv",3,10);
</script>

【参数解释】

start_marquee(div,spd,step)

div:层编号

spd:停留时间(值越小,速度越快)

step:跨越时的分段数(值越大,效果更柔和,等于1时直接切换)

参考:

演示1start_marquee("mydiv",5,1)

演示2start_marquee("mydiv2",3,10)

BTW:只要指定不同的层编号,在一个页面可以有多个SlideBox.

推荐使用第二种方法,本人通过测试

阅读:
录入:admin

推荐 】 【 打印
上一篇:另一种图片渐显的方法
下一篇:javascript常用的一些判断输入验证
相关新闻      
本文评论       全部评论
发表评论


点评: 字数
姓名:

  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款