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 相关文章推荐
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
jquery实现简单的无缝滚动
Apr 15 Javascript
jQuery UI结合Ajax创建可定制的Web界面
Jun 22 Javascript
AngularJS constant和value区别详解
Feb 28 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
vue全局使用axios的操作
Sep 08 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 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+xslt在windows平台上
2006/10/09 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PHP7.0版本备注
2015/07/23 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
js验证表单大全
2006/11/25 Javascript
javascript之水平横向滚动歌词同步的应用
2007/05/07 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
原生JS实现图片轮播与淡入效果的简单实例
2016/08/21 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
python中urllib模块用法实例详解
2014/11/19 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
深入解析Python编程中super关键字的用法
2016/06/24 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
Pytorch释放显存占用方式
2020/01/13 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
构造方法和其他方法的区别?怎么调用父类的构造方法
2013/09/22 面试题
简历中个人自我评价范文
2013/12/26 职场文书
优秀士兵个人事迹材料
2014/01/19 职场文书
《三峡》教学反思
2014/03/01 职场文书
Python中os模块的简单使用及重命名操作
2021/04/17 Python
pytorch实现ResNet结构的实例代码
2021/05/17 Python