<!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. Java复习第四天

    1.Object类 (1)Object是类层次结构的根类,所有的类都直接或者间接的继承自Object类. (2)Object类的构造方法有一个,并且是无参构造:子类构造方法默认访问父类的构造是无参构造 ...

  2. Oracle 数据库字典 sys.obj$ 表中关于type#的解释

    sys.obj$ 表是oracle 数据库字典表中的对象基础表,所有对象都在该表中有记录,其中type#字段表明对象类型,比如有一个表 test ,则该对象在sys.obj$ 中存在一条记录,name ...

  3. eclipse切换workspace后配置问题

    正常情况下如果切换了eclipse的workspace后,需要重新配置eclipse,但是可以将原工作目录中的.metadata/.plugins/org.eclipse.core.runtime拷贝 ...

  4. svn 文件后面显示时间和提交人

    1.在eclipse中选择window-->preferences,然后选择下图中的位置,就可以显示你想要的东西的了,在此记下以备后用

  5. Hibernate 一对多，多对多，多对一检索策略

    一.概述 我们先来谈谈检索数据时的两个问题: 1.不浪费内存   2.更好的检索效率 以上说的问题都是我们想要避免的,接下来就引出了我们要讨论的话题---------------hibernate检索 ...

  6. css-css的基本选择器（三种）

    ** 要对哪个标签里面的数据进行操作 (1)标签选择器 div { background-color:red; color:blue; } (2)class选择器 * 每个HTML标签中都有一个属性 ...

  7. SPOJ：COT2 Count on a tree II

    题意 给定一个n个节点的树,每个节点表示一个整数,问u到v的路径上有多少个不同的整数. n＝40000,m＝100000 Sol 树上莫队模板题 # include <bits/stdc++.h ...

  8. bat中实现代码拷贝到指定目录后启动命令行并更改默认路径

      ### window书写shell脚本,实现判断指定文件是否存在,存在就删除,然后复制新文件到此目录 ``` if exist "G:\test\test2\1.txt" (d ...

  9. JavaScript的进阶之路（一）

    JavaScript由ECMAScript BOM DOM三部分组成 ECMAScript重要版本1,3,5,6,提供核心语言功能 DOM提供访问和操作网页内容的方法和接口 BOM提供与浏览器交互的的 ...

  10. Jave 之方法-函数（5）

    如何定义Java中的方法: 所谓方法,就是用来解决一类问题的代码的有序组合,是一个功能模块. (方法在C语言中被称为函数) 一般情况下,定义一个方法的语法是: 其中: 1. 访问修饰符:方法允许被访问 ...