你的位置:首页 > Java教程

[Java教程]html背景自动移动


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
#divbg{
width:710px;
height: 339px;
/*border:1px solid red;*/
background-image: url("image/scenery.jpg");/*添加背景图片*/
background-size: 100% 100%;
position: absolute;
top:100px;
left:100px;
}
</style>
<body>
<script type="text/javascript">
var divbg=document.getElementById("divbg");//获取div
var x=0;
// var y=0;//定义垂直方向初始距离
var divbgTimer=setInterval(moveBg,100);//设置调用这个方法的定时器,100ms调用一次
function moveBg(){//背景移动函数
divbg.style.backgroundPositionX=x+"px";//对div对象的背景图片进行移动
x=x+2;//向右移动
// divbg.style.backgroundPositionY=y+"px";
// y=y+2;//向下移动
}
</script>
</body>
</html>