本文主要是介绍37-JavaScript-DOM-小游戏-小球碰撞后折返，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
参考: 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; // divwindow.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>`
这篇关于37-JavaScript-DOM-小游戏-小球碰撞后折返的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
