图片跑马灯制作

最新推荐文章于 2024-07-12 10:00:20 发布

joannazhu

最新推荐文章于 2024-07-12 10:00:20 发布

阅读量5.8k

点赞数

分类专栏： JavaScript 文章标签： function html div table 测试

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

转载于：http://hi.baidu.com/duanxw/blog/item/00e30a7bc0e776ea2f73b333.html

加了自己的修改，仅在FF下测试可用

1、纵向跑马灯

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>图片跑马灯制作</title>
<style type="text/css">
#box
{
	overflow:hidden;
	width:150px;
	height:50px;
}
</style>
</head>

<body>
<div id="box">
    <div id="demo1">
        <img src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/tb_m.PNG"/>
    </div>
    <div id="demo2">
    </div>
</div>

<script type="text/javascript">
var speed=1;

var box=document.getElementById("box");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");

demo2.innerHTML=demo1.innerHTML;

function scrollToTop(){
    if(demo2.offsetTop-box.scrollTop<=0){
        box.scrollTop-=demo1.offsetHeight;
} else{
    box.scrollTop++
    }
}

var myMar=setInterval(scrollToTop,speed);
box.οnmοuseοver=function(){clearInterval(myMar)};
box.οnmοuseοut=function(){myMar=setInterval(scrollToTop,speed)};
</script>

</body>
</html>

2、横向跑马灯

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>图片跑马灯制作</title>
<style type="text/css">
#box
{
	overflow:hidden;
	width:50px;
	height:150px;
}
</style>
</head>

<body>
<div id="box">
    <div id="demo1">
        <table cellspacing=0 cellpadding=0 width=100px>
            <tr>
                <td>
                    <img src="http://justinyoung.cnblogs.com/images/cnblogs_com/justinyoung/2007/tb_m.PNG"/>
                </td>
                <td id="demo2">
                </td>
            </tr>
        </table>
    </div>    
</div>

<script type="text/javascript">

var speed=1;

var box=document.getElementById("box");
var demo1=document.getElementById("demo1");
var demo2=document.getElementById("demo2");

demo2.innerHTML=demo1.innerHTML;

function scrollToLeft(){
    if(demo2.offsetLeft-box.scrollLeft<=0){
        box.scrollLeft-=demo2.offsetWidth;
    } else {
        box.scrollLeft++;
    }
}

var myMar=setInterval(scrollToLeft,speed);
box.οnmοuseοver=function(){clearInterval(myMar)};
box.οnmοuseοut=function(){myMar=setInterval(scrollToLeft,speed)};

</script>

</body>
</html>

刚接触前端，留着慢慢研究