Javascript开发 订阅所有【Javascript开发】的日志

很漂亮的韩式滚动图片

作者:NetFox 日期:2006-06-19

字体大小: 小 中 大
今天浏览韩国网站，看了个很漂亮的滚动图片，就把它抓下来了
演示地址：http://www.ouyangfeng.com/xiaoguo/scroll.htm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=javascript>
<!--
var rightLayerId;
var dropDegree = 5; //鞀ろ伂搿?靻嶋弰
var doDirect;
var DirectTerm = 4500; //鞀ろ伂搿?歆€鞐办嫓臧?
var curDropIdx = 0;
        
function DirectRight()
{
        clearInterval(doDirect);
        clearInterval(rightLayerId);
        
        for(i = curDropIdx ;i < document.all["DropHit"].length + curDropIdx;i++){
                document.all["DropHit"][i%document.all["DropHit"].length].style.posLeft = document.all["DropHit"][i%document.all["DropHit"].length].style.posWidth * (-1*((i-curDropIdx)%document.all["DropHit"].length));
        }
        var temp = 'setInterval("rightLayer()",20)';
        rightLayerId = eval(temp);
        //direction = "right";
}
function rightLayer()
{
        if(document.all["DropHit"][curDropIdx].style.posLeft < document.all["DropHit"][curDropIdx].style.posWidth){
                for(j = curDropIdx ;j < document.all["DropHit"].length + curDropIdx;j++){
                        document.all["DropHit"][j%document.all["DropHit"].length].style.posLeft += dropDegree;
                }
        }else{
                clearInterval(rightLayerId);
                for(j = curDropIdx ;j < document.all["DropHit"].length + curDropIdx;j++){
                        document.all["DropHit"][j%document.all["DropHit"].length].style.posLeft = document.all["DropHit"][j%document.all["DropHit"].length].style.posWidth *((-1*((j-curDropIdx)%document.all["DropHit"].length))+1);
                }
                curDropIdx = (curDropIdx + 1) ;
                curDropIdx = curDropIdx > document.all["DropHit"].length-1 ? curDropIdx%document.all["DropHit"].length:curDropIdx;
                var temp = 'setInterval("DirectRight()",DirectTerm)';
                doDirect = eval(temp);
        }
}
function DirectLeft()
{
        clearInterval(doDirect);
        clearInterval(rightLayerId);
        var tempIdx = 0;
        for(i = 0;i<document.all["DropHit"].length;i++){
                tempIdx = (document.all["DropHit"].length + curDropIdx - i) %document.all["DropHit"].length;
                document.all["DropHit"][tempIdx].style.posLeft = i*document.all["DropHit"][tempIdx].style.posWidth;
        }
        var temp = 'setInterval("LeftLayer()",20)';
        rightLayerId = eval(temp);
        //direction = "left";
}
function LeftLayer()
{
        var tempIdx = 0;
        if(document.all["DropHit"][curDropIdx].style.posLeft < document.all["DropHit"][curDropIdx].style.posWidth && document.all["DropHit"][curDropIdx].style.posLeft > document.all["DropHit"][curDropIdx].style.posWidth * (-1)){
                for(j = 0 ;j < document.all["DropHit"].length;j++){
                        tempIdx = (document.all["DropHit"].length + curDropIdx - j) %document.all["DropHit"].length;
                        document.all["DropHit"][tempIdx].style.posLeft -= dropDegree;
                }
        }else{
                clearInterval(rightLayerId);
                for(j = 0;j<document.all["DropHit"].length;j++){
                        tempIdx = (document.all["DropHit"].length + curDropIdx - j) % document.all["DropHit"].length;
                        document.all["DropHit"][tempIdx].style.posLeft = (j-1)*(document.all["DropHit"][tempIdx].style.posWidth);
                }
                curDropIdx = (curDropIdx - 1) ;
                curDropIdx = curDropIdx < 0 ? document.all["DropHit"].length-1:curDropIdx;
                var temp = 'setInterval("DirectLeft()",DirectTerm)';
                doDirect = eval(temp);
        }
}
//-->
</SCRIPT>
<META content="MSHTML 6.00.2800.1555" name=GENERATOR></HEAD>
<BODY>
<TABLE cellSpacing=0 cellPadding=0 border=0>
  <TR>
    <TD vAlign=top><A href="javascript:DirectLeft()"><IMG src="scroll/main_box_left.gif" border=0></A></TD>
    <TD vAlign=top>
      <TABLE cellSpacing=0 cellPadding=0 border=0>
        <TR>
          <TD background=scroll/main_point.gif></TD></TR>
        <TR>
          <TD>
<!-- 滚动图片开始 -->
<DIV style="LEFT: 0px; OVERFLOW: hidden; WIDTH: 351px; POSITION: relative; TOP: 0px; HEIGHT: 124px">
                  <DIV id=DropHit style="Z-INDEX: 1; LEFT: 0px; VISIBILITY: visible; WIDTH: 351px; POSITION: absolute; TOP: 0px; HEIGHT: 124px">
                    <TABLE cellSpacing=0 cellPadding=0 width=351 border=0>
                        <TR>
                          <TD><IMG src="scroll/main_newproduct01.gif" border=0></TD>
                        </TR>
                    </TABLE>
                  </DIV>
                  <DIV id=DropHit style="Z-INDEX: 1; LEFT: 0px; VISIBILITY: visible; WIDTH: 351px; POSITION: absolute; HEIGHT: 124px">
                    <TABLE cellSpacing=0 cellPadding=0 width=351 border=0>
                        <TR>
                          <TD><IMG src="scroll/main_newproduct02.gif" border=0></TD>
                        </TR>
                    </TABLE>
                  </DIV>
                  <DIV id=DropHit style="Z-INDEX: 1; LEFT: 0px; VISIBILITY: visible; WIDTH: 351px; POSITION: absolute; HEIGHT: 124px">
                    <TABLE cellSpacing=0 cellPadding=0 width=351 border=0>
                      <TR>
                        <TD><IMG src="scroll/main_newproduct03.gif" border=0></TD>
                      </TR>
                    </TABLE>
                  </DIV>
                  <SCRIPT language=javascript>DirectRight();</SCRIPT>
                </DIV>
<!-- 滚动图片结束 -->
          </TD></TR>
        <TR>
          <TD background=scroll/main_point.gif></TD></TR></TABLE></TD>
    <TD vAlign=top><A href="javascript:DirectRight()"><IMG src="scroll/main_box_right.gif" border=0></A>
</TD></TR></TABLE></BODY></HTML>






[本日志由 NetFox 于 2006-08-24 12:36 AM 编辑]
上一篇: 个人Blog终于开张了！
下一篇: 经典的20句格言
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: 滚动图片
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
昵　称:
密　码: 游客发言不需要密码.
邮　箱: 邮件地址支持Gravatar头像,邮箱地址不会公开.
网　址: 输入网址便于回访.
内　容:
验证码:
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
 字数限制 1000 字 | UBB代码 开启 | [img]标签 关闭