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时ie6和ie7,ff的区别
Aug 19 Javascript
基于jquery的仿百度搜索框效果代码
Apr 11 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
js 两数组去除重复数值的实例
Dec 06 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
js 图片懒加载的实现
Oct 21 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
神族 Protoss 历史背景
2020/03/14 星际争霸
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
Laravel框架学习笔记(一)环境搭建
2014/10/15 PHP
php usort 使用用户自定义的比较函数对二维数组中的值进行排序
2017/05/02 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
js身份证判断方法支持15位和18位
2014/03/18 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python实现聚类算法原理
2018/02/12 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
Python如何实现机器人聊天
2020/09/10 Python
python palywright库基本使用
2021/01/21 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
医科大学生的自我评价
2013/12/04 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
精彩广告词大全
2014/03/19 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
自愿解除劳动合同协议书
2014/09/11 职场文书
代办社保委托书范文
2014/10/06 职场文书
毕业生自荐信范文
2015/03/05 职场文书
2015年副班长工作总结
2015/05/15 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python
如何在python中实现ECDSA你知道吗
2021/11/23 Python
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers