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 相关文章推荐
使用C++为node.js写扩展模块
Apr 22 Javascript
js实现向右横向滑出的二级菜单效果
Aug 27 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
Apr 28 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
基于vue.js实现的分页
Mar 13 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
VUEX采坑之路之获取不到$store的解决方法
Nov 08 Javascript
Python版实现微信公众号扫码登陆
May 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
ini_set的用法介绍
2014/01/07 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
mysql alter table命令修改表结构实例详解
2016/09/24 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
php时间戳转换代码详解
2019/08/04 PHP
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Python中super()函数简介及用法分享
2016/07/11 Python
Python中str.format()详解
2017/03/12 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
浅谈PyQt5 的帮助文档查找方法,可以查看每个类的方法
2019/06/25 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
应聘编辑职位自荐信范文
2014/01/05 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
信息专业学生学习的自我评价
2014/02/17 职场文书
经济担保书范文
2014/04/02 职场文书
干部对照检查材料范文
2014/08/26 职场文书
长城英文导游词
2015/01/30 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android