zoukankan      html  css  js  c++  java
  • 【javascript动画之圆形运动】环绕鼠标运动作小球(兼容ie,ff,chrome,……)

    原创文章,转载请注明出处:http://www.cnblogs.com/airy/

    效果看鼠标的周围吧!!

    代码如下:

    <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
    = e.clientX + document.documentElement.scrollLeft;
    y
    = e.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>
  • 相关阅读:
    CF_402C Searching for Graph 乱搞题
    zoj Simple Equation 数论
    zoj 3757 Alice and Bob and Cue Sports 模拟
    uva_12535
    boj1267 Infinite’s Cave 树形dp + 背包
    CF_216_Div_2
    nxlog4go 简介
    log4go的一些改进设想
    nxlog4go 的配置驱动
    nxlog4go Log Levels and Pattern Layout
  • 原文地址:https://www.cnblogs.com/airy/p/1780695.html
Copyright © 2011-2022 走看看