<!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. 翻屏类 h5 适配方案：解决宽高自适应难题

    表格 图片等 宽度自适应  :width:100%;  box-sizing: border-box; 基于淘宝适配方案flexible + 翻屏h5 适配方案adaptive flexible解读及 ...

  2. Tomcat热启动

    ===== 2017.7.1 ===== 如果是对原来的类方法修改,那么热启动非常好用:如果是添加了新的类或方法(非最上层的controller),那么此方法也是好用的:但是如果是在controlle ...

  3. 第六章使用java实现面向对象-集合框架

    一:接口:即表示集合的抽象数据类型. 实现:即集合框架中接口的实现. 算法:在一个实现了某个集合框架中的接口的对象身上完成某种有用的计算的方法,例如查找. 排序等. Collection 接口存储一组 ...

  4. ASP.NET MVC4 新手入门教程之五 ---5.用控制器访问模型数据

    在本节中,将创建一个新的MoviesController类并编写代码来检索电影数据并将其显示在浏览器中使用一个视图模板. 才走出下一步生成应用程序. 用鼠标右键单击控制器文件夹中并创建一个新的 Mov ...

  5. type=file的change事件只能执行一次的解决方案

    最近帮朋友做个项目中遇到了type=file change事件只能执行一次的问题,度娘了一下,发现提供了各种解决方案,所以决定记录一下我的思考方向和最终解决方式. 起初帮朋友做个项目,项目中遇到上传文 ...

  6. [javaSE] JDBC的批处理

    向数据库发送多条sql语句 create database batch use batch create table batch_table( id int primary key auto_incr ...

  7. Python基础学习总结(四）

    6.高阶特性 6.1迭代 如果给定一个list或tuple,我们可以通过for循环来遍历这个list或tuple,这种遍历我们称为迭代(Iteration).在Python中,迭代是通过for ... ...

  8. 固态硬盘SSD与闪存（Flash Memory）

    转自:http://qiaodahai.com/solid-state-drives-ssd-and-flash-memory.html 固态硬盘SSD(Solid State Drive)泛指使用N ...

  9. 设计模式-单例模式下对多例的思考(案例：Server服务器)

    前述: 在学习单例模式后,对老师课上布置的课后作业,自然要使用单例模式,但是不是一般的单例,要求引起我的兴趣,案例是用服务器. 老师布置的要求是:服务器只有一个,但是使用这个服务器时候可以有多个对象( ...

  10. 【统计学】英文概念之Mean和Average的区别

    通过专门检索和其他课本的比较,得到了如下结论.统计学在分析数据时,需要对数据进行最基础的描述性分析.在众多描述分析的指标中,平均数指标能够反映分布数列集中趋势.但是平均数指标包括两类:一类是数值平均数 ...