javascript运动系列第七篇——鼠标跟随运动

前端开发

2016-10-26

关注关注

前面的话

运动除了直线运动和曲线运动两种运动形式外，还有一种运动形式是鼠标跟随运动，而这种跟随运动需要用到三角函数的相关内容或者需要进行比例运算。本文将以几个小实例来介绍角度运动的相关内容

眼球转动

在很多网页中，都存在着跟随运动，比如眼球转动。鼠标在网页中移动时，眼球也会跟着朝相应方向转动

上面是眼球转动的示意图，(x0,y0)是眼球的位置，而(x,y)是鼠标的位置。设直线与垂直方向的夹角为a，假设圆心点坐标为(0,0)，可以得到以下公式

tan(a) = x/y = x0/y0
    x0 = r*sin(a) 
    y0 = r*cos(a)

在mousemove事件中，可以很容易的得到鼠标位置(x,y)，由此求出夹角a，进而可以求出眼球的位置

设左眼为ball1，右眼为ball2。左眼的圆心坐标是(39,72)，右眼的圆心坐标是(106,68)，眼球可以移动的半径是12px

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test{position: absolute;top: 100px;left: 200px;}
#ball1{position: absolute;top: 62px;left: 28px;}
#ball2{position: absolute;top: 58px;left: 96px;}
</style>
</head>
<body>
<div id="test">
    <img src="head.png" alt="body">   
    <img id="ball1" src="ball.png" alt="ball">
    <img id="ball2" src="ball.png" alt="ball">    
</div>
<script>
//声明脑袋的默认偏移
var offsetLeft = test.offsetLeft;
var offsetTop = test.offsetTop;
//声明左眼夹角a1、右眼夹角a2
var a1,a2;
//声明左眼圆心(X1,Y1)、右眼圆心(X2,Y2)
var X1 = 38,Y1 = 72,X2 = 106,Y2 = 68;
//声明半径
var R = 12;
document.onmousemove = function(e){
    e = e || event;
    //获取鼠标坐标
    var x = e.clientX;
    var y = e.clientY;
    //更新夹角a1、a2
    a1 = Math.atan2(x-X1-offsetLeft,y-Y1-offsetTop);
    a2 = Math.atan2(x-X2-offsetLeft,y-Y2-offsetTop);
    //更新左眼、右眼的left、top值
    ball1.style.left = R*Math.sin(a1) + X1 -10 + 'px';
    ball1.style.top = R*Math.cos(a1) + Y1 -10+ 'px';
    ball2.style.left = R*Math.sin(a2) + X2 -10 + 'px';
    ball2.style.top = R*Math.cos(a2) + Y2 -10 + 'px';
}
</script>
</body>
</html>

苹果菜单

苹果菜单中也存在着鼠标跟随运动，与鼠标距离越近的菜单项的宽高越大，越远则宽高越小

javascript运动系列第七篇——鼠标跟随运动

鼠标坐标可以通过mousemove事件中的clientX和clientY获得。菜单项的坐标其实是已知项。而鼠标坐标与菜单项的距离就是要求的距离，而距离与菜单项的宽高成反比

[注意]不能够将元素的自定义属性命名为x，因为x已经被浏览器使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{margin: 0;}
#test{position: absolute;bottom:0;width: 100%;text-align: center;}
img{width: 64px;height: 64px;}
</style>
</head>
<body>
<div id="test">
    <img id="img1" src="img/1.png">
    <img src="img/2.png">
    <img src="img/3.png">
    <img src="img/4.png">
    <img src="img/5.png">  
</div>
<script>
//声明菜单项的宽高值
var offsetWidth = img1.offsetWidth;
var offsetHeight = img1.offsetHeight;
//声明外层盒子的left、top值
var offsetLeft = test.offsetLeft;
var offsetTop = test.offsetTop;
//获取菜单项
var imgs = test.getElementsByTagName('img');
document.onmousemove = function(e){
    e = e || event;
    //更新鼠标位置
    var x = e.clientX;
    var y = e.clientY;
    for(var i = 0; i < imgs.length; i++){
        //获取菜单项的坐标
        imgs[i].x0= imgs[i].offsetLeft+offsetLeft+imgs[i].offsetWidth/2;
        imgs[i].y0 = imgs[i].offsetTop + offsetTop + imgs[i].offsetHeight/2;
        //更新鼠标与菜单项的距离
        imgs[i].len =Math.sqrt((x-imgs[i].x0)*(x-imgs[i].x0) + (y-imgs[i].y0)*(y-imgs[i].y0));
        //限制范围
        if(imgs[i].len > 150){
            imgs[i].len = 150;
        }
        //更新菜单项的宽高
        imgs[i].style.width = (1-imgs[i].len/300)*2*offsetWidth + 'px';
        imgs[i].style.height = (1-imgs[i].len/300)*2*offsetHeight + 'px';
        
    }
}
</script>
</body>
</html>

运动眼球