javascript横向滚动效果

javascript横向滚动效果，支持DOCTYPE xhtml申明

-HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="  http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<table width="499 " border="1" cellpadding="0" cellspacing="0" bordercolor="#CC6600">
    <tr>
        <td width="495"><div id='demo' style='overflow:hidden;height:70px;width:400px'>
                <div id=demo1> <a href='' target='_blank '> 这是滚动第1行 </a> <br>

                    这是滚动第2行 <br>
                    这是滚动第3行 <br>
                    这是滚动第4行 <br>
                    这是滚动第5行 <br>
                    这是滚动第6行 <br>
                    这是滚动第7行 <br>

                    这是滚动第8行 <br>
                </div>
                <div id='demo2'> </div>
            </div>
<script>

    var speed=20
    var demo2 = document.getElementById("demo2");
    var demo1 = document.getElementById("demo1");
    
    demo2.innerHTML=demo1.innerHTML
    function Marquee()
    {
        if(demo2.offsetTop-demo.scrollTop <=0)
        demo.scrollTop-=demo1.offsetHeight
    else
        {
        demo.scrollTop++
        }
    }
    var MyMar=setInterval(Marquee,speed)
    var demo=document.getElementById('demo');//=========
    demo.onmouseover=function() {clearInterval(MyMar)}
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script> 
 </td>
    </tr>
</table>

</body>
</html>

加支付宝好友偷能量挖...

原创文章，转载请注明出处：javascript横向滚动效果

2010-6-18评论(0)Web开发网

阅读(166)喜欢(0)分类：JavaScript/Ajax开发技巧