<!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. SpringBoot | 第三十六章：集成多CacheManager

    前言 今天有网友咨询了一个问题:如何在一个工程中使用多种缓存进行差异化缓存,即实现多个cacheManager灵活切换.原来没有遇见这种场景,今天下班抽空试了下,以下就把如何实现的简单记录下. 一点知 ...

  2. EV3DVue干涉检测的优势分析

    过去几年中国制造行业获得了的快速发展,各企业为了尽可能早的抢占市场,对模具的生产周期要求越来越短,精度要求越来越高,这就对模具设计以及制造等各个环节提出了更高的要求.随着CAD/CAM技术的深入应用, ...

  3. Nuxt.js学习心得

    一.官网 Nuxt.js - Universal Vue.js Applications https://nuxtjs.org/ 二.中文官网 Nuxt.js - Vue.js 通用应用框架 http ...

  4. 互联网轻量级框架SSM-查缺补漏第五天

    简言:这个地方我就草草过了,NBA圣诞大战,偷偷看比赛,真香~ 第五章映射器 5.2select元素 自动映射和驼峰映射:MyBatis提供了自动映射功能,在默认的情况下自动映射功能是开启的. 在se ...

  5. 插入排序——Python实现

    一.排序思想 排序思想参见:https://www.cnblogs.com/luomeng/p/10583124.html 二.python实现 def InsertSort(arrs): " ...

  6. 重构指南 - 为布尔方法命名（Rename boolean method）

    如果一个方法中包含多个布尔类型的参数,一是方法不容易理解,二是调用时容易出错. 重构前代码 public class BankAccount { public void CreateAccount(C ...

  7. css-flex布局知识梳理

    一.传统的布局 布局的传统解决方案,基于盒装模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 二. Flex的 ...

  8. 在vue中安装使用vux

    最近因为的工作的原因在弄vue,从后端弄到前端之前一直用js,现在第一次接触vue感觉还挺有意思的,就是自己太菜了,这个脑子呀....不太够用.....页面设计用了一个叫vux的东西,vux可以提供一 ...

  9. C语言——单链表初始化、求表长、读表元素、插入元素

    头文件Linear.h // 单链表的类型定义 typedef struct node { int data; // 数据域 struct node *next; // 指针域 }Node, *Lin ...

  10. Android输入法架构学习总结

    此文为本人学习输入法之后所做的一个总结报告.与大家分享. 安卓输入法框架(Input Method Framework)IMF 一．输入法框架简介 自Android平台1.5版本以后,Google开放 ...