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 相关文章推荐
懒就要懒到底——鼠标自动点击(含时间判断)
Feb 20 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
JS字符串拼接在ie中都报错的解决方法
Mar 27 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
Bootstrap table使用方法总结
May 10 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
vue全局使用axios的方法实例详解
Nov 22 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
Nov 05 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 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 register_shutdown_function函数的深入解析
2013/06/03 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
firefox下frameset取不到值的解决方法
2010/09/06 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
Jquery获取radio选中值实例总结
2019/01/17 jQuery
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
[02:44]2014DOTA2 国际邀请赛中国区预选赛 大神红毯秀
2014/05/25 DOTA
cProfile Python性能分析工具使用详解
2019/07/22 Python
Python decimal模块使用方法详解
2020/06/08 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
农救科工作职责
2013/11/27 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
学子宴答谢词
2014/01/25 职场文书
家长写给老师的建议书
2014/03/13 职场文书
在校大学生的职业生涯规划书
2014/03/14 职场文书
2014年应急工作总结
2014/12/11 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB