js - 图标在网页上漂浮移动效果

<!-- position: absolute -- 用浏览器的绝对位置的显示div -->

<!-- <div>标签要放在<script>标签前面, 因为执行顺序的原因, 如果放后面js便无法找到<div>标签。程序失败 -->

<div id="float_icon" style="position: absolute">

<a href="http://www.sohu.com" target="_blank"><img src="abc.jpg"></a>

</div>

<script type="text/javascript">

var dirX = 1, dirY = 1;

var posX = 0, posY = 0;

/*

* 两种方法调用float_icon的属性

*/

document.body.all.float_icon.style.top = 0;

document.body.all.float_icon.style.left = 0;

float_icon.style.visibility = "visible";

window.setInterval("moveIcon()",1);

function moveIcon() {

posX += (2 * dirX);

posY += (2 * dirY);

float_icon.style.top = posY;

float_icon.style.left = posX;

if(posX < 1 || posX + float_icon.offsetWidth > document.body.clientWidth)

dirX = -dirX;

if(posY < 1 || posY + float_icon.offsetHeight > document.body.clientHeight)

dirY = -dirY;

}

</script>