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 相关文章推荐
使用正则替换变量
May 05 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
THREE.JS入门教程(3)着色器-下
Jan 24 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
javascript时间差插件分享
Jul 18 Javascript
Node.js学习入门
Jan 03 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
Jan 24 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
PHP通过文件保存和更新信息的方法分析
2019/09/12 PHP
javascript 函数使用说明
2010/04/07 Javascript
JSON+HTML实现国家省市联动选择效果
2014/05/18 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
seajs中模块依赖的加载处理实例分析
2017/10/10 Javascript
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
小程序开发之模态框组件封装
2020/04/23 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
Python模仿POST提交HTTP数据及使用Cookie值的方法
2014/11/10 Python
Python httplib模块使用实例
2015/04/11 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python中遍历列表的方法总结
2019/06/27 Python
python多进程重复加载的解决方式
2019/12/13 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
网络专业学生个人的自我评价
2013/12/16 职场文书
五好家庭事迹材料
2014/12/20 职场文书
刑事法律意见书
2015/06/04 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
MySQL命令行操作时的编码问题详解
2021/04/14 MySQL
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers