<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<style type="text/css">
body{margin:0;}
#aa{width:1100px;height:700px;border:1px solid #000;background:#000;postion:absolute;float:left;}
#bb{float:left;}#cc{float:left;}
.pp{width:6px;height:6px;background:#fff;position:absolute;}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div id="aa"></div>
<div id="bb"></div>
<div id="cc"></div>
<script>
var num = 100; //元素的總個數
var floatSpeed = 300; //浮動速度
var floatCycle = 500; //浮動週期 （浮動速度的2倍）
var $xx = 100; //鼠標 x 座標
var $yy = 100; //鼠標 y 座標
var moveTime = 600; //移動時間
var moveDistance = 20; //移動距離
var randMoveDistanceTop = 80; //隨機距離上限
var randMoveDistanceDown = 5; //隨機距離下限
var moveDistance2 = moveDistance;
var moveDistance3 = moveDistance;
var arrDistance = [];
var addOrLess = null; //隨機符號
var addOrLess2 = null;
var arrAddOrLess = ["+", "-"];
var intvalEleFloat = null;
var intvalMouse = null; //監視鼠標是否靜止
var intvalStartMouse = null;
var fx = 0; //標記鼠標是否移動
var fy = 0;
//創建元素
for(var i=0;i < num;i++){$("#aa").append("<div id=\"p" + i + "\" class=\"pp\"></div>");}
//初始化元素位置
randPosition();
//開始浮動
goFloat();
//監視鼠標是否靜止
intvalMouse = setInterval(function(){
//若鼠標發生移動
if(fx != $xx || fy != $yy){
//清空動畫列隊，執行完現有動畫
$(".pp").stop(true, false);
fx = $xx;
fy = $yy;
$("#cc").text("");
//元素移動到鼠標位置
follow();
$("#bb").text("xx:" + $xx + "...yy:" + $yy + "...fx:"+fx+"...fy:"+fy);
};
}, 400);
$("#aa").mousemove(function (e) {
$xx = e.originalEvent.x || e.originalEvent.layerX || 0;
$yy = e.originalEvent.y || e.originalEvent.layerY || 0;
$("#bb").text("xx:" + $xx + "...yy:" + $yy + "...fx:"+fx+"...fy:"+fy);
$(".pp").stop(true, false);
});
function randPosition(){
$(".pp").each(function(){
randDistance();
$(this).animate({left:($xx + (arrDistance[2]))+"px", top:($yy + (arrDistance[3]))+"px"}, moveTime);
$("#cc").append("<p>2:"+moveDistance2+"...3:"+moveDistance3+"...x:"+($xx + (moveDistance2))+"...y:"+($yy + (moveDistance3))+"</p>");
});
}
function follow(){
$(".pp").each(function(){
randDistance();
$(this).animate({left:($xx + (arrDistance[2]))+"px", top:($yy + (arrDistance[3]))+"px"}, moveTime);
});
}
//移動隨機距離
function randDistance(){
moveDistance = parseInt(Math.random() * (randMoveDistanceTop - randMoveDistanceDown + 1) + randMoveDistanceDown);
addOrLess = arrAddOrLess[Math.floor(Math.random() * arrAddOrLess.length)];
addOrLess2 = addOrLess;
if(addOrLess == "-"){moveDistance2 = -moveDistance;}else{moveDistance2 = moveDistance;};
moveDistance = parseInt(Math.random() * (randMoveDistanceTop - randMoveDistanceDown + 1) + randMoveDistanceDown);
addOrLess = arrAddOrLess[Math.floor(Math.random() * arrAddOrLess.length)];
if(addOrLess == "-"){moveDistance3 = -moveDistance;}else{moveDistance3 = moveDistance;};
arrDistance[0] = moveDistance;
moveDistance = parseInt(Math.random() * (randMoveDistanceTop - randMoveDistanceDown + 1) + randMoveDistanceDown);
arrDistance[1] = moveDistance;
arrDistance[2] = moveDistance2;
arrDistance[3] = moveDistance3;
}
function goFloat(){
intvalEleFloat = setInterval(eleFloat, floatCycle);
}
function eleFloat(){
$(".pp").each(function(){
randDistance();
$(this).animate({left:addOrLess+"="+arrDistance[0]+"px", top:addOrLess2+"="+arrDistance[1]+"px"}, floatSpeed);
if(addOrLess == "-"){addOrLess = "+";}else{addOrLess = "-";};
if(addOrLess2 == "-"){addOrLess2 = "+";}else{addOrLess2 = "-";};
$(this).animate({left:addOrLess+"="+arrDistance[0]+"px", top:addOrLess2+"="+arrDistance[1]+"px"}, floatSpeed);
});
}
</script>
</body>
</html>另一版本詳見GitHub : https://github.com/yotcap/someGadgets/tree/master/Elements-float-follow-the-mouse