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

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

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

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/js-f-apple-but om-nav-menu-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8' /title仿苹果电脑任务栏菜单/titlestyle type='text/css '正文{ margin :0 padd :0 } # menu { position : absolute；宽度：100%;底部：0;文本对齐：居中；}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var oMenu=document。getelementbyid('菜单')；var aImg=omenu。getelementsbytagname(' img ')；var aWidth=[]；var I=0；//保存原宽度，并设置当前宽度for(I=0；我爱长度；推偏移);aImg[i].width=parseInt(aImg[i]).offset withts/2)；} //鼠标移动事件文件。onmousemove=function(event){ var event=event | | window。事件；for(I=0；我爱长度；i ) { var a=event.clientX - aImg[i].offsetLeft - aImg[i].偏移量为/2；var b=event.clientY - aImg[i].偏移顶部-omenu。偏移顶部-AimG[I].偏右/2;var Iscale=1-数学。sqrt(a * a * b * b)/300；如果(iScale 0.5)iScale=0.5；aImg[i].width=aWidth[I]* IsCale } }；};/script/head dydiv id=' menu ' img src=' http : images/1。png '/img src=' http : images/2。png '/img src=' http : images/3。png '/img src=' http : images/4。png '/img src=' http : images/5。png '/img src=' http : images/6希望本文所述对大家的爪哇岛描述语言程序设计有所帮助。