首页 > 代码库 > javascript运动系列第七篇——鼠标跟随运动

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

2024-08-17 19:26:28   220人阅读

×
目录
[1]眼球转动 [2]苹果菜单

前面的话

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

 

眼球转动

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

技术分享

　　上面是眼球转动的示意图，(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、右眼夹角a2var 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>

<iframe style="width: 100%; height: 300px;" src="http://sandbox.runjs.cn/show/rqwrhr3x" frameborder="0" width="320" height="240"></iframe>

苹果菜单

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

技术分享

　　鼠标坐标可以通过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>

<iframe style="width: 100%; height: 200px;" src="http://sandbox.runjs.cn/show/dvljvuwj" frameborder="0" width="320" height="240"></iframe>

<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script><script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js"></script>

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


联系
我们