<!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. response提交原理（转）

    摘自:http://blog.csdn.net/quechao123/article/details/6256653         http://jorton468.blog.163.com/blo ...

  2. solr 索引库的维护

    一.配置中文分析器:IK-analyzer,在FieldType中指定中文分析器:1 复制IK-analyzer到你的服务器指定目录中.2 在该目录中,我们需要的东西有:IKAnalyzer的jar包 ...

  3. Firebird execute block 批处理

    火鸟的批处理,效率好高,使用简单. execute block as declare variable i ; begin ) do begin :i = :i + ; insert into m_u ...

  4. C# WinForm API 改进单实例运行

    在普通的单实例中,第二次点击软件快捷方式的时候,往往简单提示"系统已经运行",而不是把第一次打开的软件主窗体显示出来,下面演示如果主窗体已经打开则把第一次打开的主窗体放置到最前面; ...

  5. PHP学习10——Cookie和Session技术

    主要内容: Cookie技术 创建cookie 查看cookie 读取cookie 用cookie记录访问时间和次数 删除cookie cookie的生命周期 Session技术 session工作原 ...

  6. 借助 CORS 从 JavaScript 使用 API 应用

    应用服务提供内置的跨域资源共享 (CORS) 支持,可让 JavaScript 客户端对 API 应用中托管的 API 进行跨域调用.应用服务允许配置对 API 的 CORS 访问,无需在 API 中 ...

  7. DataGridView初始化，加载数据

    1,创建winform窗体应用程序 2,在界面上拖入DataGridView控件 3,添加相应的列如图: 4,开始编写后面的代码: private DataTable CountryDt = new ...

  8. 纯手写实现HashMap

    1.hashmap的实现 ① 初始化 1)定义一个Node<K, V>的数组来存放元素,但不立即初始化,在使用的时候再加载 2)定义数组初始大小为16 3)定义负载因子,默认为0.75, ...

  9. Java SortedSet为什么可以实现自动排序？

    Set中的SortedSet(SortedSet为TreeSet的实现接口),它们之间的继承关系如下: java.util.Set; java.util.SortedSet; java.util.Tr ...

  10. python文件修改 核心5步，函数实现修改任意文件内容

    文件修改 核心5步1.以读的模式打开原文件,产生句柄f12.以写的模式打开一个新文件,产生句柄f23.读取原文件的内容并将原文件需要替换的内容修改写入到新文件4.删除原文件5.把新文件重名了成原文件 ...