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 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
JavaScript数据结构之二叉树的查找算法示例
Apr 13 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
Aug 28 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
May 31 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 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函数
2006/10/09 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
JS复制到剪贴板示例代码
2013/10/30 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
jquery单行文字向上滚动效果示例
2014/03/06 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
2017/05/08 jQuery
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
代码整洁之道(重构)
2018/10/25 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
Python实战之制作天气查询软件
2019/05/14 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Python2与Python3的区别点整理
2019/12/12 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
阿波罗盒子:Apollo Box
2017/08/14 全球购物
标准的毕业生自荐信
2014/04/20 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
本科应届生求职信
2014/08/05 职场文书
运动会广播稿100字
2014/09/14 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
文明倡议书
2015/01/19 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
介绍信样本
2015/01/31 职场文书
安全生产奖惩制度
2015/08/06 职场文书