javascript动画之圆形运动,环绕鼠标运动作小球


Posted in Javascript onJuly 20, 2010

代码如下:

<script type="text/javascript"> 
var ball; 
var mouseX = 100; 
var mouseY = 100; 
var angle = 0; 
var radius = 50; function run(){ 
if(ball === undefined){ 
ball = document.createElement("span"); 
ball.style.position = "absolute"; 
ball.style.color = "#FF0000"; 
ball.style.zIndex = 999999999; 
ball.innerHTML = "●"; 
document.body.appendChild(ball); 
} 
ball.style["left"] = mouseX+(Math.cos(angle)*radius) + "px"; 
ball.style["top"] = mouseY+(Math.sin(angle)*radius) + "px"; 
angle+=0.1; 
} 
function MousePos(e) 
{ 
e = e || window.event; 
var x,y; 
if(!document.all){ 
x = e.pageX; 
y = e.pageY; 
} 
else{ 
x = event.clientX + document.documentElement.scrollLeft; 
y = event.clientY + document.documentElement.scrollTop; 
} 
return {x:x,y:y}; 
} 
function setXY(e) 
{ 
e = e || window.event; 
var pos = MousePos(e); 
mouseX = pos.x; 
mouseY = pos.y; 
} 
window.onload = function(){ 
setInterval(run,20); 
document.documentElement.onmousemove = function(e){ 
e = e || window.event; 
setXY(e); 
}; 
} 
</script>

作者: cnblogs airy
Javascript 相关文章推荐
如何用javascript控制上传文件的大小
Oct 26 Javascript
Jquery 基础学习笔记之文档处理
May 29 Javascript
Exitjs获取DataView中图片文件名
Nov 26 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
详解webpack介绍&amp;安装&amp;常用命令
Jun 29 Javascript
JS判断微信扫码的方法
Aug 07 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
vuex 解决报错this.$store.commit is not a function的方法
Dec 17 Javascript
微信小程序身份证验证方法实现详解
Jun 28 Javascript
根据出生日期自动取得星座的js代码
Jul 20 #Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 #Javascript
Javascript实现CheckBox的全选与取消全选的代码
Jul 20 #Javascript
js下写一个事件队列操作函数
Jul 19 #Javascript
js+css在交互上的应用
Jul 18 #Javascript
基于jQuery试卷自动排版系统
Jul 18 #Javascript
Date对象格式化函数代码
Jul 17 #Javascript
You might like
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
Jquery遍历Json数据的方法
2015/04/20 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
Ionic默认的Tabs模板使用实例
2016/08/29 Javascript
简单谈谈Vue 模板各类数据绑定
2016/09/25 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
[06:36]吞吞映像top1
2014/06/20 DOTA
[44:40]2018DOTA2亚洲邀请赛3月30日 小组赛A组Liquid VS OG
2018/03/31 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
幼儿园国庆节活动方案
2014/02/01 职场文书
行政求职信
2014/07/04 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
小学生通知书评语
2014/12/31 职场文书
JS中如何优雅的使用async await详解
2021/10/05 Javascript
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸