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 相关文章推荐
认识延迟时间为0的setTimeout
May 16 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 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 实现多服务器共享 SESSION 数据
2009/08/15 PHP
php设计模式 Factory(工厂模式)
2011/06/26 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
php字符串截取函数用法分析
2014/11/25 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
原生JS:Date对象全面解析
2016/09/06 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
2017/01/19 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
2020/06/04 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
简单介绍Python中的struct模块
2015/04/28 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
对python while循环和双重循环的实例详解
2019/08/23 Python
Python实现随机取一个矩阵数组的某几行
2019/11/26 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
移动端Html5中百度地图的点击事件
2019/01/31 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
社会实践自我鉴定
2013/11/07 职场文书
品管员岗位职责
2013/11/10 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python