JS,仿苹果底部,任务栏,菜单本文实例讲述了JS实现仿苹果底部任务栏菜单效果代码。分享给大家供大家参考。具体如下： 这款仿苹果电脑的底部任务栏菜单，是纯JavaScript实现的菜单特效，鼠标放上有响应效果，菜单图标会变大，而且动画效果非常流畅，以前发过这种效果，但是是使用了jQuery实现的，今天这个没有jQuery插件哦。 运行效果截图如下： 
在线演示地址如下： http://demo.wanshiok.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程序设计有所帮助。
JS,仿苹果底部,任务栏,菜单
|
