37

阅读：评论：0

37

参考: 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=".jpg" /></div></body>

<style type="text/css">body {/*背景图 501 * 500 pixels*/background-image: url(-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; // load = function() {sunDiv = ElementById("sunDiv");window.setInterval(move, interval);}        function move() {// 改变坐标sunX += directX;sunY += directY;// 改变位置p = 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>

本文发布于:2024-01-27 20:05:42，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/17063571402354.html

上一篇：Scratch3.0——助力新进程序员理解程序(案例三、折返走)

下一篇：环状序列/用求余实现折返

标签：

留言与评论（共有 0 条评论）