<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轨迹</title><script>
var speed = [1, 1]; //初始位移值：[水平，垂直]
var speedMax = 5; //最大位移值
var length = 1; //位移系数
var boxSpace = [50, 50, 500, 300]; //画布参数：[起始点水平位置，起始点垂直位置，宽度，高度]
var item = [200, 150, 50, 50]; //控件参数：[起始点水平位置，起始点垂直位置，宽度，高度]
var millisec = 5; //执行周期间隔，单位：毫秒
var playFlag = true; //初始状态：播放/停止//初始化
function init(){
//初始化控制栏
var styleBar = $("bar").style;
styleBar.left = boxSpace[0] + "px";
styleBar.width = boxSpace[2] + "px";
//初始化画布
var styleBox = $("box").style;
styleBox.left = boxSpace[0] + "px";
styleBox.top = boxSpace[1] + "px";
styleBox.width = boxSpace[2] + "px";
styleBox.height = boxSpace[3] + "px";
//初始化控件
var styleClk = $("clk").style;
styleClk.left = item[0] + "px";
styleClk.top = item[1] + "px";
styleClk.width = item[2] + "px";
styleClk.height = item[3] + "px";
//注册控件鼠标事件
$("clk").onmouseover = stop;
$("clk").onmouseout = play;
//注册控制栏事件
$("btnPlay").onclick = play;
$("btnStop").onclick = stop;
//默认播放或停止
if(playFlag) play();
}
//播放
function play(){
playFlag = true;
autoMove();
}
//停止
function stop(){
playFlag = false;
}
//返回Dom对象
function $(elmId){
return document.getElementById(elmId);
}
//生成随机数
function randomNum(min, max){
var Range = max - min;
var Rand = Math.random();
return(min + Math.round(Rand * Range));
}
//动画逻辑
function autoMove(){
//生成本次位移量
var xBool = randomNum(0, 100) > 50 ? 1 : -1; //水平位移趋势，1：向右，-1：向左
var yBool = randomNum(0, 100) > 50 ? 1 : -1; //垂直位移趋势，1：向下，-1：向上
speed[0] += xBool * length; //在原来水平位移量的基础上，加入趋势影响
speed[1] += yBool * length; //在原来垂直位移量的基础上，加入趋势影响 //处理本次位移量是否已经超过最大值
if(speed[0] < -1 * speedMax) speed[0] = -1 * speedMax; //水平位移量不允许超过最大值
if(speed[0] > speedMax) speed[0] = speedMax; //水平位移量不允许超过最大值
if(speed[1] < -1 * speedMax) speed[1] = -1 * speedMax; //垂直位移量不允许超过最大值
if(speed[1] > speedMax) speed[1] = speedMax; //垂直位移量不允许超过最大值 //允许控件活动的画布坐标范围
var leftLimit = boxSpace[0];
var topLimit = boxSpace[1];
var rightLimit = boxSpace[0] + boxSpace[2] - item[2];
var bottomLimit = boxSpace[1] + boxSpace[3] - item[3]; //当前控件坐标位置
var xNow = parseInt($("clk").style.left);
var yNow = parseInt($("clk").style.top); //对控件活动超出范围时进行反弹处理
if((xNow + speed[0]) < leftLimit || (xNow + speed[0]) > rightLimit) speed[0] *= -1;
if((yNow + speed[1]) < topLimit || (yNow + speed[1]) > bottomLimit) speed[1] *= -1; //重新设定控件坐标，形成动画
$("clk").style.left = xNow + speed[0] + "px";
$("clk").style.top = yNow + speed[1] + "px"; //调用下一次动画逻辑
if(playFlag) setTimeout(autoMove, millisec);
}
window.onload = init;
</script>
<style>
#bar { position: absolute; background: #F5F1C2; border: 1px solid #996600; z-index: 30; text-align: center; line-height:26px; height:30px; top: 20px }
#bar a { color: #FFF; font-size: 10pt; margin: 2px 2px; display: block; width: 80px; height: 26px; background: #7C7514; float: left; text-decoration:none}
#bar a:hover { background:#C00; }
#box { position: absolute; background: #FFFFCC; border: 1px solid #996600; z-index: 10 }
#clk { position: absolute; cursor:pointer; background: #000000; color: #FFF; text-align: center; line-height:50px; z-index: 20 }
</style>
</head>
<body>
<div id="bar"><a href="#" rel="external nofollow" rel="external nofollow" id="btnPlay">播放</a><a href="#" rel="external nofollow" rel="external nofollow" id="btnStop">停止</a></div>
<div id="box"></div>
<div id="clk">点这</div>
</body>
</html>
没有任何美感的运行效果：
