闲来无事，用javascript写了一个简单的轨迹动画 

<!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>

 

没有任何美感的运行效果：

posted @ 2013-09-05 21:42  网无忌  阅读(2176)  评论(0)  编辑  收藏  举报