思路：將圖片設置爲圖層背景，圖層內放置關閉圖片（塊）和鏈接具體位置，漂浮整個圖層，並實現鼠標移入調整圖層透明度並停止，鼠標離開繼續移動。
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>FloatImg</title>
<link rel="stylesheet" type="text/css" href="floatImg.css">
<script type="text/javascript" src="floatImg.js"></script>
</head>
<body>
<div id="floatImg">
<span id="closeImg">×</span>
<a target="_blank" href="http://blog.csdn.net/anbuhay/"></a>
</div>
</body>
</html>CSS代碼：
body{
margin: 0;
padding: 0;
height: 2000px;
}
#floatImg{
/*position: absolute;*/
background-image: url(images/Lighthouse.jpg);
width: 100px;
height: 75px;
border: 1px solid #ccc;
filter: alpha(opacity=80);
opacity:0.8;
z-index: 999;
}
#floatImg span{
display: inline-block;
float: right;
text-align: center;
vertical-align:center;
width: 15px;
height: 15px;
border: 1px solid #ccc;
cursor: default;
}
#floatImg a{
height: 55px;
display: block;
clear: both;
}JAVASCRIPT腳本
window.onload = function(){
// 獲取需要移動的DOM對象
var oDiv = document.getElementById('floatImg');
var oClose = document.getElementById('closeImg');
objFloat(oDiv,2,30);
closeDiv(oClose, oDiv);
};
/* 浮動方法
* ID爲需要浮動的對象id
* SPEED爲INTERVAL時間內移動的距離（單位：px）
* INTERVAL爲時間間隔（單位：ms）
*/
function objFloat(oDiv,SPEED,INTERVAL){
oDiv.style.position = 'absolute';
// 獲取oDiv的寬和高
var oDivWidth = oDiv.offsetWidth;
var oDivHeight = oDiv.offsetHeight;
// 初始化定時器
var timer = null;
// 初始化移動方向，SPEED爲正數向右（下）移動，SPEED爲負數向左（上）移動
var speedX = Math.random()>0.5? SPEED:-SPEED; // 水平方向
var speedY = Math.random()>0.5? SPEED:-SPEED; // 垂直方向
// 如果oDiv不在可視區內，設置移動DOM的當前位置
// pageWidth, pageHeight, xScroll, yScroll分別爲：
// 可視區寬，可視區高，右滑動距離，下滑動距離
function resetSpeedAndPosition(pageWidth, pageHeight, xScroll, yScroll){
if(oDiv.offsetLeft - xScroll <= 0 ){ //超出左邊界
speedX = SPEED;
oDiv.style.left = xScroll + 'px';
}
if(oDiv.offsetTop - yScroll <= 0){ //超出上邊界
speedY = SPEED;
oDiv.style.top = yScroll + 'px';
}
if(oDiv.offsetLeft >= pageWidth - oDivWidth + xScroll){ //超出右邊界
speedX = -SPEED;
oDiv.style.left = pageWidth - oDivWidth + xScroll + 'px';
}
if(oDiv.offsetTop >= pageHeight - oDivHeight + yScroll){ //超出下邊界
speedY = -SPEED;
oDiv.style.top = pageHeight - oDivHeight + yScroll + 'px';
}
}
// 運動方法
function startMove(){
var arr = getScrollAndSize();
resetSpeedAndPosition(arr[0],arr[1],arr[2],arr[3]);
oDiv.style.left = oDiv.offsetLeft + speedX + 'px';
oDiv.style.top = oDiv.offsetTop + speedY + 'px';
}
// 文檔加載完畢，立刻開始移動，間隔30ms執行一次
initPosition(oDiv);
timer = setInterval(startMove,INTERVAL);
// 鼠標覆蓋，停止移動，並設置透明度爲不透明
oDiv.onmouseover = function(){
clearInterval(timer);
this.style.filter='alpha(opacity=100)';
this.style.opacity=1;
};
// 鼠標離開，繼續移動，並設置透明度爲70
oDiv.onmouseout = function(){
timer = setInterval(startMove,INTERVAL);
this.style.filter='alpha(opacity=80)';
this.style.opacity=0.8;
};
}
// 給移動DOM一個隨機位置和一個隨機的移動速度
function initPosition(oDiv){
var arr = getScrollAndSize();
oDiv.style.left = Math.round(Math.random()*arr[0]) + arr[2] + 'px';
oDiv.style.top = Math.round(Math.random()*arr[1]) + arr[3] + 'px';
}
// 獲取可視區寬、高和混動距離
function getScrollAndSize(){
// 獲取可視區的寬和高
var pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var pageHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// 獲取滾動位置
var xScroll = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
var yScroll = window.pageYOffset || document.documentElement.scrollLeft || document.body.scrollTop;
return [pageWidth, pageHeight, xScroll, yScroll];
}
// 點擊一個DOM對象，關閉另一個
function closeDiv(closeDiv, targetDiv){
closeDiv.onclick = function(){
targetDiv.style.display = 'none';
}
}