思想决定人生，态度改变一切

成功者找方法,失败者找借口! 做事先做人；安分做人，本分做事!
  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
Javascript实现连续滚动的跑马灯，可上下左右滚动(转)
<html>
<head>
<title>左右滚动的图片效果 - 51windows.Net</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript" src="js/js.js" type="text/javascript"></script>
</head>
<body bgcolor="#999999">

<table border="1" width="760" align="center">
  <tr>
    <td width="215">
        Scroll Width:<input type="text" size="5" name="scrollWidth"><BR>
        Offset Width:<input type="text" size="5" name="offsetWidth">
        </td>
    <td width="545">
        <div id="demo" style="overflow:hidden;height:120px;width:543px;">
        <table width="100%" cellspacing="0">
            <tr>
                <td id="demo1">
                    <table cellspacing="2">
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border="0"/></a></td>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border="0"/></a></td>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border="0"/></a></td>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border="0"/></a></td>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border="0"/></a></td>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border="0"/></a></td>
                        </tr>
                    </table>                </td>
                <td id="demo2"></td>
            </tr>
        </table>
        </div>
        </td>
  </tr>
  <tr>
    <td width="215"> </td>
    <td width="545">
            <div id="v1demo" style="overflow:hidden;height:120px;width:543px;">
            <table width="100%" cellspacing="0">
                <tr>
                    <td id="v1demo1">
                        <table cellspacing="2">
                            <tr>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border="0"/></a></td>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border="0"/></a></td>
                            </tr>
                        </table></td>
                    <td id="v1demo2" bgcolor="#000000">
                        <table cellspacing="2">
                            <tr>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border="0"/></a></td>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border="0"/></a></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            </div>
        </td>
  </tr>
  <tr>
    <td width="215"> </td>
    <td width="545">
            <div id="v2demo" style="overflow:hidden;height:120px;width:543px;">
            <table width="100%" cellspacing="0">
                <tr>
                    <td id="v2demo1">
                        <table cellspacing="2">
                            <tr>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border="0"/></a></td>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border="0"/></a></td>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border="0"/></a></td>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border="0"/></a></td>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border="0"/></a></td>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border="0"/></a></td>
                            </tr>
                        </table></td>
                    <td id="v2demo2" bgcolor="#FF0000">
                        <table cellspacing="2">
                            <tr>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border="0"/></a></td>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border="0"/></a></td>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border="0"/></a></td>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border="0"/></a></td>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border="0"/></a></td>
                                <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border="0"/></a></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            </div>
        </td>
  </tr>
  <tr>
    <td></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td></td>
    <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="5">
      <tr>
        <td>
        <div id="hdemo" style="overflow:hidden;height:550px;width:190px;">
        <table width="100%" cellspacing="0">
            <tr>
                <td id="hdemo1">
                    <table cellspacing="2">
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border="0"/></a></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td id="hdemo2">
                    <table cellspacing="2">
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border="0"/></a></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        </div>
                </td>
        <td>
        <div id="h2demo" style="overflow:hidden;height:550px;width:190px;">
        <table width="100%" cellspacing="0">
            <tr>
                <td id="h2demo1">
                    <table cellspacing="2">
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border="0"/></a></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td id="h2demo2">
                    <table cellspacing="2">
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng016.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng017.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng018.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng019.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng020.JPG" border="0"/></a></td>
                        </tr>
                        <tr>
                            <td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder/jsimg/TN_Feng021.JPG" border="0"/></a></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        </div>
                </td>
      </tr>
    </table></td>
  </tr>
</table>
<script>
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth;}else{demo.scrollLeft+=2}}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

//通用上下，左右连续滚动，跑马灯
function MarqueeTest(direct,MainId,contentId,copyId){
  var objMain = document.getElementById(MainId);
    var objContent = document.getElementById(contentId);
    var objCopy = document.getElementById(copyId);
    var mainWidth = objMain.offsetWidth
    var contentWidth = objContent.offsetWidth
    var copyWidth = objCopy.offsetWidth;
    var mainHeight = objMain.offsetHeight;
    var contentHeight = objContent.offsetHeight;
    var copyHeight = objCopy.offsetHeight;
    if (direct=="LEFT"){
        if (copyWidth-objMain.scrollLeft<=0){
            objMain.scrollLeft-=contentWidth;
        }else{
            objMain.scrollLeft+=2;
        }
    }else if (direct=="RIGHT"){
        if (copyWidth-mainWidth-objMain.scrollLeft>=0){
            objMain.scrollLeft=contentWidth + copyWidth - mainWidth;
        }else{
            objMain.scrollLeft-=2;
        }
    }else if (direct=="UP"){
        if (copyHeight-objMain.scrollTop<=0){
            objMain.scrollTop-=contentHeight;
        }else{
            objMain.scrollTop+=2;
        }
    }else if (direct=="DOWN"){
        if (copyHeight-mainHeight-objMain.scrollTop>=0){
            objMain.scrollTop=contentHeight + copyHeight - mainHeight;
        }else{
            objMain.scrollTop-=2;
        }      
    }
}

var v1Scroll = setInterval("MarqueeTest('LEFT','v1demo','v1demo1','v1demo2')",speed);
v1demo.onmouseover=function() {clearInterval(v1Scroll)}
v1demo.onmouseout=function() {v1Scroll=setInterval("MarqueeTest('LEFT','v1demo','v1demo1','v1demo2')",speed)}

var v2Scroll = setInterval("MarqueeTest('RIGHT','v2demo','v2demo1','v2demo2')",speed);
v2demo.onmouseover=function() {clearInterval(v2Scroll)}
v2demo.onmouseout=function() {v2Scroll=setInterval("MarqueeTest('RIGHT','v2demo','v2demo1','v2demo2')",speed)}

var h1Scroll = setInterval("MarqueeTest('UP','hdemo','hdemo1','hdemo2')",speed);
hdemo.onmouseover=function() {clearInterval(h1Scroll)}
hdemo.onmouseout=function() {h1Scroll=setInterval("MarqueeTest('UP','hdemo','hdemo1','hdemo2')",speed)}

var h2Scroll = setInterval("MarqueeTest('DOWN','h2demo','h2demo1','h2demo2')",speed);
h2demo.onmouseover=function() {clearInterval(h2Scroll)}
h2demo.onmouseout=function() {h2Scroll=setInterval("MarqueeTest('DOWN','h2demo','h2demo1','h2demo2')",speed)}
</script>
</body>
</html>
posted on 2006-10-28 12:18  投石问路  阅读(2045)  评论(0)  编辑  收藏  举报