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动画效果类封装代码
Aug 28 Javascript
jquery插件jbox使用iframe关闭问题
Feb 09 Javascript
获取内联和链接中的样式(js代码)
Apr 11 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
js实现无限瀑布流实例方法
Sep 16 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
基于JS实现操作成功之后自动跳转页面
Sep 25 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
关于IIS php调用com组件的权限问题
2012/01/11 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP基于DOMDocument解析和生成xml的方法分析
2017/07/17 PHP
lib.utf.js
2007/08/21 Javascript
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
vue下载excel的实现代码后台用post方法
2019/05/10 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python使用gensim计算文档相似性
2016/04/10 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
详解python中的线程
2018/02/10 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
python实现自动发送邮件
2018/06/20 Python
Python延时操作实现方法示例
2018/08/14 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
Pyqt5自适应布局实例
2019/12/13 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
详解Canvas实用库Fabric.js使用手册
2019/01/07 HTML / CSS
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
服装创业计划书范文
2014/02/05 职场文书
作风建设剖析材料
2014/10/06 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
Python3接口性能测试实例代码
2021/06/20 Python