javascript动画之圆形运动,环绕鼠标运动作小球

代码如下：


代码如下:

<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

赞 (0)

相关推荐

  • javascript动画之模拟拖拽效果篇

    javascript动画之模拟拖拽效果篇

    先看看实现效果图, 模拟拖拽最终效果和在桌面上移动文件夹的效果类似 原理介绍 鼠标按下时,拖拽开始.鼠标移动时,被拖拽元素跟着鼠标一起移动.鼠标抬起时,拖拽结束 所以,拖拽的重点是确定被拖拽元素是如何移动的 假设,鼠标按下时,鼠标对象的clientX和clientY分别为x1和x2.元素距离视口左上角x轴和y轴分别为x0和y0 鼠标移动的某一时刻,clientX和clientY分别为x2和y2 所以,元素移动的x轴和y轴距离分别为x2-x1和y2-y1 元素移动后,元素距离视口左上角x轴和y轴的

  • JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】

    JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】

    本文实例讲述了JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果.分享给大家供大家参考,具体如下: 基于Sketch.js,实现了物体触碰检测(蝌蚪会遇到障碍物以及聪明的躲避鼠标的点击),随机运动,聚集算法等. 已经具备了游戏的基本要素,扩展一下可以变成一个不错的 HTML5 游戏. 演示效果如下: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-

  • 用js模拟JQuery的show与hide动画函数代码

    复制代码 代码如下: //根据ID返回dom元素 var $ = function(id){return document.getElementById(id);} //返回dom元素的当前某css值 var getCss = function(obj,name){ //ie if(obj.currentStyle) { return obj.currentStyle[name]; } //ff else { var style = document.defaultView.getCompute

  • JS运动框架之分享侧边栏动画实例

    本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <meta charset="utf-8">          <title></title>          <style type="text/css">         

  • js弹性势能动画之抛物线运动实例详解

    抛物线运动就是:当拖拽结束的时候,我们让当前的元素同时水平运动+垂直运动 在同样的移动距离下,我们鼠标移动的速度快,move方法触发的次数少,相反移动的速度慢,move方法触发的次数就多->浏览器对于每一次的move行为的触发都是由一个最小时间的. 通过观察,我们发现一个事情:水平方向我们盒子在结束拖拽的时候移动的速度和移动的距离没有必然的联系,和开始拖拽的速度也没有必然的联系,只和最后一次即将松开的那一瞬间鼠标的速度是有关系的,最后瞬间鼠标如果移动的快,我们水平运动的距离和速度也是比较大的.-

  • 原生javascript实现匀速运动动画效果

    原生javascript实现匀速运动动画效果

    本文向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码: <html> <head> <meta charset="gb2312"> <head> <title>javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px;

  • 用js实现的模拟jquery的animate自定义动画(2.5K)

    后来发现还不错.不如继续写下去. 这个版本基本上跟jquery的animate一样了. 我是说效果基本上一样了.(效率还没测试过.): 如果有专业测试人员 帮我测试下. 1:功能说明 兼容主流浏览器. 1:支持回调函数: 2:支持级联动画调用: 3:支持delay动画队列延迟: 4:支持stop停止动画: 5:支持opacity透明度变化: 6:支持+= -= *= /=操作: 7:支持单位操作(px, %); 2:使用说明 jelle(A).animate(B, C, D); A:需要执行动画

  • js 排序动画模拟 冒泡排序

    而在某些场景中,队列确实像一支奇兵,可以带来不错的效果,比如配合定时器使用,可以模拟时间差效果 复制代码 代码如下: function createDq(){ var dq = [], size = 0; return { setDq:function(queue){ dq = queue; size = queue.length; }, queue:function(fn){ size ++; dq.push(fn); }, dqueue:function(){ size --; return

  • js运动动画的八个知识点

    今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){ 复制代码 代码如下: oDiv.style.left=oDiv.offsetLeft+10+"px"; },30). 对于这里为什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是: a.offsetLeft和left的相同之处都是表示子节点相对于父

  • javascript动画之圆形运动,环绕鼠标运动作小球

    代码如下: 复制代码 代码如下: <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 = &

  • jQuery实现跟随鼠标运动图层效果的方法

    jQuery实现跟随鼠标运动图层效果的方法

    本文实例讲述了jQuery实现跟随鼠标运动图层效果的方法.分享给大家供大家参考.具体分析如下: 一.基本目标 写一个跟随鼠标运动的图层, 图层中显示当前鼠标的位置, 如下图所示: 此图层之所以使用jQuery,而不是因为javascript,是因为jQuery的代码其便于兼容当前的所有主流的浏览器,至少IE8是没有任何问题的,不用像javascript大段大段的代码都用到兼容性上面了. 二.制作过程 本次实验的核心是jquery里面的mousemove事件, 鼠标移动则触发. 代码如下: 复制代

  • JavaScript实现环绕鼠标旋转效果

    本文实例为大家分享了JavaScript实现环绕鼠标旋转效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0&qu

  • JavaScript运动框架 链式运动到完美运动（五）

    基于前几篇的运动框架基础,本文主要讲解一下链式运动,就是运动完后接着再运动,比如很多网站中,一个方框的出现和退出:出现时先变宽再变高,退出时先变矮再变窄退出! 之前的模型是: startMove(obj, json); 现在改为: startMove(obj, json, fn); 也就是在第一次运动结束的时候执行fn(); fn是传过来的一个参数,这个参数是个函数,定时器清理之后手动运行fn();如果想采用链式运动,那就是在fn中再调用startMove(obj, json, fn),再在里面

  • javascript实现网页中涉及的简易运动（改变宽高、透明度、位置）

    平时工作中写网页涉及的运动往往都非常简单,比如改变宽高,透明度,位置,是最常用的几种形式,为了省事,整合了下,于是就有了下面这个东东: 兼容:IE系列.chrome.firefox.opera.Safari.360 /* javascript简易运动 Move.action(dom对象,json格式属性值对,缓动参考值,回调方法) 示例: var box = document.getElementById('Ele'); Move.action(box,{width:500,height:200

  • Javascript动画效果（1）

    前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的多物体运动后面我们还会介绍任意值变化的运动.链式运动.同时运动,同时我们还会简单的封装一个运动插件并且还会将Javascript方法和jquery方法进行比较. 1.简单的匀速运动 下面我们介绍一个demo,鼠标移入,动画向右移动(即隐藏部分显示):鼠标离开,动画向左运动(继续隐藏)整个过程都是匀速的.有了前面回到顶部效果作为基础,这

  • Javascript动画效果（2）

    Javascript动画效果（2）

    在前面的文章中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码:border: 4px solid #000;我们发现,鼠标移出后,宽度不是200px了,那么究竟是如何产生这种情况的呢?下面我们通过一个新的例子来分析 html代码: <div id="div1">hello</div> css代码: body,div{ margin: 0px; padding:

  • 浅析JavaScript动画

    今天,小学生以自己浅薄的见地,在前辈大能的基础上写这篇文章,希望给大家打开一扇窥探JavaScript(以下简称JS)动画的窗户. JS如何制造出动画效果? 结合浏览器提供的 setInterval 或 setTimeout API,高频改变DOM元素的一些属性,即可创造一个肉眼可见的动画效果.一个看起来非常流畅的JS动画除了需要良好的变换算法外,与其执行宿主也是非不开的.程序写得再好,如果浏览器过于老旧,电脑CPU性能低下,也会出现卡顿,甚至卡死. 执行一个动画函数对于浏览器来说是个苦差,设置

  • javascript动画算法实例分析

    本文实例讲述了javascript动画算法.分享给大家供大家参考.具体如下: 动画算法 Linear:无缓动效果(匀速运动): Quadratic:二次方的缓动: Cubic:三次方的缓动 Quartic:四次方的缓动: Quintic:五次方的缓动: Sinusoidal:正弦曲线的缓动: Exponential:指数曲线的缓动: Circular:圆形曲线的缓动: Elastic:指数衰减的正弦曲线缓动: Back:超过范围的三次方缓动): Bounce:指数衰减的反弹缓动. 每个效果都分三

  • Javascript动画效果（4）

    Javascript动画效果（4）

    前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下滚入的效果,那么那种效果是如何实现的呢? 首先我们我们完成该效果的html和css代码,代码如下: html部分代码: <div id="move"> <a href="#"><i><img src="images/1.jpg"/><

随机推荐