JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼

更新時(shí)間：2015年08月28日 10:49:14 作者：企鵝

這篇文章主要介紹了JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過顯示大圖標(biāo)功能,涉及javascript鼠標(biāo)事件及頁(yè)面元素遍歷并修改屬性的技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼。分享給大家供大家參考。具體如下：

這款仿蘋果電腦的底部任務(wù)欄菜單，是純JavaScript實(shí)現(xiàn)的菜單特效，鼠標(biāo)放上有響應(yīng)效果，菜單圖標(biāo)會(huì)變大，而且動(dòng)畫效果非常流暢，以前發(fā)過這種效果，但是是使用了jQuery實(shí)現(xiàn)的，今天這個(gè)沒有jQuery插件哦。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/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>仿蘋果電腦任務(wù)欄菜單</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;
 //保存原寬度, 并設(shè)置當(dāng)前寬度
 for (i = 0; i < aImg.length; i++)
 {
  aWidth.push(aImg[i].offsetWidth);
  aImg[i].width = parseInt(aImg[i].offsetWidth / 2);
 }
 //鼠標(biāo)移動(dòng)事件
 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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

javaScript動(dòng)態(tài)添加Li元素的實(shí)例
下面小編就為大家分享一篇javaScript動(dòng)態(tài)添加Li元素的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
php register_shutdown_function函數(shù)詳解
register_shutdown_function() 函數(shù)可實(shí)現(xiàn)當(dāng)程序執(zhí)行完成后執(zhí)行的函數(shù)，其功能為可實(shí)現(xiàn)程序執(zhí)行完成的后續(xù)操作,需要的朋友可以參考下
2017-07-07
layui的數(shù)據(jù)表格+springmvc實(shí)現(xiàn)搜索功能的例子
今天小編就為大家分享一篇layui的數(shù)據(jù)表格+springmvc實(shí)現(xiàn)搜索功能的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
如何用JS/HTML將時(shí)間戳轉(zhuǎn)換為“xx天前”的形式
如果我們有一份過去時(shí)間戳，如何使用JS/HTML將時(shí)間戳轉(zhuǎn)換為“xx天前”的形式呢？很多朋友都覺得解決辦法有點(diǎn)困難，其實(shí)很簡(jiǎn)單的，下面小編給大家分享完整的實(shí)現(xiàn)代碼，一起看看吧
2017-02-02
詳解微信小程序文件下載--視頻和圖片
這篇文章主要介紹了微信小程序文件下載視頻和圖片，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
JS實(shí)現(xiàn)TITLE懸停長(zhǎng)久顯示效果完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)TITLE懸停長(zhǎng)久顯示效果,結(jié)合完整實(shí)例形式分析了JavaScript鼠標(biāo)事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2020-02-02
詳解如何使用JSZip實(shí)現(xiàn)在瀏覽器中操作文件與文件夾
這篇文章主要介紹了如何使用JSZip實(shí)現(xiàn)在瀏覽器中操作文件與文件夾,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
2024-04-04
對(duì)google個(gè)性主頁(yè)的拖拽效果的js的完整注釋[轉(zhuǎn)]
對(duì)google個(gè)性主頁(yè)的拖拽效果的js的完整注釋[轉(zhuǎn)]...
2007-04-04
妙用Bootstrap的 popover插件實(shí)現(xiàn)校驗(yàn)表單提示功能
最近使用bootstrap開發(fā)項(xiàng)目比較多，在表單校驗(yàn)功能中用popover插件實(shí)現(xiàn)出錯(cuò)提示功能很方面，下面小編給大家?guī)砹艘黄P(guān)于Bootstrap的 popover插件實(shí)現(xiàn)校驗(yàn)表單提示功能的實(shí)現(xiàn)代碼，非常不錯(cuò)，感興趣的朋友一起看看吧
2016-08-08
詳解webpack 熱更新優(yōu)化
這篇文章主要介紹了詳解webpack 熱更新優(yōu)化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-09-09