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日历 推荐
Dec 03 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
Mar 26 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
Javascript前端下载后台传来的文件流代码实例
Aug 18 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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
PHP音乐采集(部分代码)
2007/02/14 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
使用PHP生成二维码的两种方法(带logo图像)
2014/03/14 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
Vue实现6位数密码效果
2018/08/18 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
2020/04/26 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
Python的Django框架中的表单处理示例
2015/07/17 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
python中uuid模块实例浅析
2020/12/29 Python
导购员的岗位职责
2014/02/08 职场文书
企业后勤岗位职责
2014/02/28 职场文书
注册资产评估专业求职信
2014/07/16 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
税务会计岗位职责
2015/04/02 职场文书
仙境之桥观后感
2015/06/16 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
工作感言一句话
2015/08/01 职场文书
2016年教师新年寄语
2015/08/18 职场文书
pytorch实现ResNet结构的实例代码
2021/05/17 Python
详解Python中*args和**kwargs的使用
2022/04/07 Python