说明：详细源码位于（所有文件\经典详例\floatLink.zip）
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Float Link....</title>
</head>
<body>
<div
style='position: absolute; width: 100px; height: 100px; cursor: pointer;'>
<a href="http://baidu.com" target="_blank"> <img
src='./img/baidu.jpg' style="styleFloat: 'right'" border="0">
</a>
</div>
</body>
<script type="text/javascript">
// 设定移动的时间间隔片
var _time = 100;
window.onload = function() {
// 获取div悬浮框
var _div = document.getElementsByTagName('div')[0];
// 设置悬浮框的初始化位置
var x = 10;
var y = 10;
// 悬浮框移动
function moves() {
var tops = _div.offsetTop;
var lefts = _div.offsetLeft;
//clientWidth:网页可见区域宽
if (lefts >= document.documentElement.clientWidth
- _div.offsetWidth
|| lefts <= 0) {
x = -x;
}
//clientHeight:网页可见区域高
if (tops >= document.documentElement.clientHeight
- _div.offsetHeight
|| tops <= 0) {
y = -y;
}
tops += y;
lefts += x;
_div.style.top = tops + "px";
_div.style.left = lefts + "px";
}
// 定时器
var _timer = setInterval(moves, _time);
//当鼠标停在悬浮框上时 悬停停止
_div.onmouseover = function() {
clearInterval(_timer);
};
//当鼠标移开悬浮框时 放手继续运动
_div.onmouseout = function() {
_timer = setInterval(moves, _time);
};
};
</script>
</html>
浙公网安备 33010602011771号