<!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="#" id="btnPlay">播放</a><a href="#" id="btnStop">停止</a></div> <div id="box"></div> <div id="clk">点这</div> </body> </html>
没有任何美感的运行效果：
宠辱不惊，看庭前花开花落；去留无意，望天上云卷云舒
