js鼠标跟随运动之苹果菜单
时间：6年前 阅读：4536
运动除了直线运动和曲线运动两种运动形式外，还有一种运动形式是鼠标跟随运动，而这种跟随运动需要用到三角函数的相关内容或者需要进行比例运算。本文将以几个小实例来介绍鼠标跟随运动的相关内容
苹果菜单
苹果菜单中也存在着鼠标跟随运动，与鼠标距离越近的菜单项的宽高越大，越远则宽高越小
鼠标坐标可以通过mousemove事件中的clientX和clientY获得。菜单项的坐标其实是已知项。而鼠标坐标与菜单项的距离就是要求的距离，而距离与菜单项的宽高成反比
[注意]不能够将元素的自定义属性命名为x，因为x已经被浏览器使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{margin: 0;}
#test{position: absolute;bottom:10px;width: 100%;text-align: center;}
img{width: 64px;height: 64px;}
</style>
</head>
<body>
<div id="test">
<img id="img1" src="https://www.qiquanji.com/data/img/dmj/201905061557109704953548.jpg">
<img src="https://www.qiquanji.com/data/img/dmj/201905061557109705826605.jpg">
<img src="https://www.qiquanji.com/data/img/dmj/201905061557109705130514.jpg">
<img src="https://www.qiquanji.com/data/img/dmj/201905061557109706835780.jpg">
<img src="https://www.qiquanji.com/data/img/dmj/201905061557109706152102.jpg">
</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>
具体效果点（运行代码）来看。
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论