参考: Cascading Style Sheet 2.0 中文手册_.chm
1. 背景图片
1) 语法
background-image : none | url (url)
2) 图片平铺,去重复
background-repeat : repeat | no-repeat | repeat-x | repeat-y
2. offsetWidth / offsetHeight
获取当前对象的 实际width/height
3. body.clientWidth / body.clientHeigth
<body>
<div id="sunDiv">
<img src="http://pic3.nipic.com/20090528/2739211_173235081_2.jpg" />
</div>
</body>
<style type="text/css">
body {
/*背景图 501 * 500 pixels*/
background-image: url(http://photo.enterdesk.com/2009-11-1/enterdesk.com-1A2153AC6853FFE52D9C0142F24AF424.jpg);
/*背景图不够大时, 不重复*/
background-repeat : no-repeat;
}
#sunDiv {
position: absolute;
background-color: gray;
}
#sunDiv img {
width: 40px;
height: 40px;
}
</style>
<script type="text/javascript">
// 两个方向
var directX = 1; // x轴方向
var directY = 1; // y轴方向
// 太阳的坐标
var sunX = 0;
var sunY = 0;
// 速度
var interval = 10;
var sunDiv; // div
window.onload = function() {
sunDiv = document.getElementById("sunDiv");
window.setInterval(move, interval);
}
function move() {
// 改变坐标
sunX += directX;
sunY += directY;
// 改变位置
sunDiv.style.top = sunY + "px";
sunDiv.style.left = sunX + "px";
// 转变方向,
if ( sunX + sunDiv.offsetWidth >= 520 || sunX < 0 ) {
directX = - directX;
}
if ( sunY + sunDiv.offsetHeight >= 500 || sunY < 0 ) {
directY = - directY;
}
}
</script>
`