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

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

闲来无事，用javascript写了一个简单的轨迹动画的更多相关文章

  1. 只是一个用EF写的一个简单的分页方法而已

    只是一个用EF写的一个简单的分页方法而已 慢慢的写吧.比如,第一步,先把所有数据查询出来吧. //第一步. public IQueryable<UserInfo> LoadPagesFor ...

  2. 写了一个简单的CGI Server

    之前看过一些开源程序的源码,也略微知道些Apache的CGI处理程序架构,于是用了一周时间,用C写了一个简单的CGI Server,代码算上头文件,一共1200行左右,难度中等偏上,小伙伴可以仔细看看 ...

  3. JavaScript写的一个带AI的井字棋

    最近有一门课结束了,需要做一个井字棋的游戏,我用JavaScript写了一个.首先界面应该问题不大,用html稍微写一下就可以.主要是人机对弈时的ai算法,如何使电脑方聪明起来,是值得思考一下的.开始 ...

  4. 自己写的一个简单PHP采集器

    自己写的一个简单PHP采集器 <?php //**************************************************************** $url = &q ...

  5. 写了一个简单可用的IOC

    根据<架构探险从零开始写javaweb框架>内容写的一个简单的 IOC 学习记录    只说明了主要的类,从上到下执行的流程,需要分清主次,无法每个类都说明,只是把整个主线流程说清楚,避免 ...

  6. 写了一个简单的 Mybatis

    写了一个简单的 Mybatis,取名 SimpleMybatis . 具备增删改查的基本功能,后续还要添加剩下的基本数据类型和Java集合类型的处理. 脑图中有完整的源码和测试的地址 http://n ...

  7. 用25行JavaScript语句实现一个简单的编译器

    原文:https://www.iteye.com/news/32680 译者注:即使对于专业程序员来说,构造一个编译器也是颇具挑战性的任务,本文将会引导你抽丝剥茧,一探究竟! 我已经写了几篇与编程语言 ...

  8. 利用HttpClient写的一个简单页面获取

    之前就听说过利用网络爬虫来获取页面,感觉还挺有意思的,要是能进行一下偏好搜索岂不是可以满足一下窥探欲. 后来从一本书上看到用HttpClient来爬取页面,虽然也有源码,但是也没说用的HttpClie ...

  9. 今天写了一个简单的新浪新闻RSS操作类库

    今天,有位群友问我如何获新浪新闻列表相关问题,我想,用正则表达式网页中取显然既复杂又不一定准确,现在许多大型网站都有RSS集合,所以我就跟他说用RSS应该好办一些. 一年前我写过一个RSS阅读器,不过 ...

随机推荐

  1. VMware workstation 非正常关机导致开机失败，解决方法

    问题:VMware workstation 非正常关机导致开机失败!如下图:

  2. JavaScript使用Object.defineProperty方法实现双数据绑定

    Object.defineProperty这个方法非常值得学习,很多mvc框架中的双向数据绑定就是通过它来实现的. 本着互联网分享精神,今天我就将我自己的见解分享给大家,希望能有所帮助. 开始使用 O ...

  3. 自动收缩数据库T-SQL

    alter database 数据库名 set auto_update_statistics off alter database 数据库名 set auto_update_statistics on

  4. JAVA数据类型中的char类型

    1.JAVA中,char占2字节,16位.可在存放汉字 2.char赋值 char a='a'; //任意单个字符,加单引号. char a='中';//任意单个中文字,加单引号. char a=11 ...

  5. mysql Backup &recovery

    备份数据库非常重要,这样您就可以恢复数据,并在发生问题时重新启动并运行,例如系统崩溃,硬件故障或用户错误地删除数据. 在升级MySQL安装之前,备份也是必不可少的保护措施,它们可用于将MySQL安装转 ...

  6. mysql-配置主从数据库，实现读写分离

    主从分离的原则:所有的写操作在主数据库中进行,因为主从分离的原理是涉及到同步数据,那就可能会出现延迟或者其他问题,就可能会出现脏数据. 所以,在从库中进行的读操作也必须是有一定容忍性的数据,例如日志等 ...

  7. POJ 2923（状态集合背包）

    http://www.cnblogs.com/kuangbin/archive/2012/09/14/2685430.html #include <iostream> #include & ...

  8. Docker镜像保存为文件及从文件导入镜像的方法

    参考 1.概述 我们制作好镜像后,有时需要将镜像复制到另一台服务器使用. 能达到以上目的有两种方式,一种是上传镜像到仓库中(本地或公共仓库),但是另一台服务器很肯能只是与当前服务器局域网想通而没有公网 ...

  9. CSS基础-CSS三大特性

    继承性 层叠性 优先级 优先级权重 !important

  10. Junit 单元测试、BeanUtils、Properties类

    一. Junit单元测试 1.1. Junit单元测试框架的基本使用 一.搭建环境: 导入junit.jar包(junit4) 二.写测试类: 0,一般一个类对应一个测试类. 1,测试类与被测试类最好 ...