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 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
event.srcElement+表格应用
Aug 29 Javascript
jQuery 1.0.2
Oct 11 Javascript
JS解密入门之凭直觉解
Jun 25 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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下intval()和(int)转换使用与区别
2008/07/18 PHP
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
javascript Base类 包含基本的方法
2009/07/22 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
2017/09/06 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
详解python读取和输出到txt
2019/03/29 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
护理职业生涯规划书
2014/01/24 职场文书
幼儿园教研活动总结
2014/04/30 职场文书
临时租车协议范本
2014/09/23 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
农业项目合作意向书
2015/05/08 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
JavaScript 定时器详情
2021/11/11 Javascript