JS实现仿苹果底部任务栏菜单效果代码

2019-11-20 11:39:20

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现仿苹果底部任务栏菜单效果代码。分享给大家供大家参考。具体如下：

这款仿苹果电脑的底部任务栏菜单，是纯JavaScript实现的菜单特效，鼠标放上有响应效果，菜单图标会变大，而且动画效果非常流畅，以前发过这种效果，但是是使用了jQuery实现的，今天这个没有jQuery插件哦。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-f-apple-buttom-nav-menu-style-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>仿苹果电脑任务栏菜单</title><style type="text/css"> body{margin:0;padding:0}#menu{position:absolute;width:100%;bottom:0;text-align:center;}</style><script type="text/javascript"> window.onload = function (){ var oMenu = document.getElementById("menu"); var aImg = oMenu.getElementsByTagName("img"); var aWidth = []; var i = 0; //保存原宽度, 并设置当前宽度 for (i = 0; i < aImg.length; i++) {  aWidth.push(aImg[i].offsetWidth);  aImg[i].width = parseInt(aImg[i].offsetWidth / 2); } //鼠标移动事件 document.onmousemove = function (event) {  var event = event || window.event;  for (i = 0; i < aImg.length; i++)  {   var a = event.clientX - aImg[i].offsetLeft - aImg[i].offsetWidth / 2;   var b = event.clientY - aImg[i].offsetTop - oMenu.offsetTop - aImg[i].offsetHeight / 2;   var iScale = 1 - Math.sqrt(a * a + b * b) / 300;   if (iScale < 0.5) iScale = 0.5;   aImg[i].width = aWidth[i] * iScale  } };};</script></head><body><div id="menu"> <img src="images/1.png" /> <img src="images/2.png" /> <img src="images/3.png" /> <img src="images/4.png" /> <img src="images/5.png" /> <img src="images/6.png" /> <img src="images/7.png" /> <img src="images/8.png" /></div></body></html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：AngularJS+Node.js实现在线聊天室

下一篇：jquery实现的弹出层登录和全屏层注册特效代码分享