JS實現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼
更新時間：2015年08月28日 10:49:14 作者：企鵝
這篇文章主要介紹了JS實現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼,可實現(xiàn)鼠標滑過顯示大圖標功能,涉及javascript鼠標事件及頁面元素遍歷并修改屬性的技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼。分享給大家供大家參考。具體如下：
這款仿蘋果電腦的底部任務(wù)欄菜單，是純JavaScript實現(xiàn)的菜單特效，鼠標放上有響應(yīng)效果，菜單圖標會變大，而且動畫效果非常流暢，以前發(fā)過這種效果，但是是使用了jQuery實現(xiàn)的，今天這個沒有jQuery插件哦。
運行效果截圖如下：
在線演示地址如下：
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è)置當前寬度
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程序設(shè)計有所幫助。
相關(guān)文章
下面小編就為大家分享一篇javaScript動態(tài)添加Li元素的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
php register_shutdown_function函數(shù)詳解
register_shutdown_function() 函數(shù)可實現(xiàn)當程序執(zhí)行完成后執(zhí)行的函數(shù)，其功能為可實現(xiàn)程序執(zhí)行完成的后續(xù)操作,需要的朋友可以參考下2017-07-07
layui的數(shù)據(jù)表格+springmvc實現(xiàn)搜索功能的例子
今天小編就為大家分享一篇layui的數(shù)據(jù)表格+springmvc實現(xiàn)搜索功能的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
如何用JS/HTML將時間戳轉(zhuǎn)換為“xx天前”的形式
如果我們有一份過去時間戳，如何使用JS/HTML將時間戳轉(zhuǎn)換為“xx天前”的形式呢？很多朋友都覺得解決辦法有點困難，其實很簡單的，下面小編給大家分享完整的實現(xiàn)代碼，一起看看吧2017-02-02
這篇文章主要介紹了微信小程序文件下載視頻和圖片，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了JS實現(xiàn)TITLE懸停長久顯示效果,結(jié)合完整實例形式分析了JavaScript鼠標事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2020-02-02
詳解如何使用JSZip實現(xiàn)在瀏覽器中操作文件與文件夾
這篇文章主要介紹了如何使用JSZip實現(xiàn)在瀏覽器中操作文件與文件夾,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2024-04-04![對google個性主頁的拖拽效果的js的完整注釋[轉(zhuǎn)]](http://img.jbzj.com/images/xgimg/bcimg7.png)
對google個性主頁的拖拽效果的js的完整注釋[轉(zhuǎn)]
對google個性主頁的拖拽效果的js的完整注釋[轉(zhuǎn)]...2007-04-04
妙用Bootstrap的 popover插件實現(xiàn)校驗表單提示功能
最近使用bootstrap開發(fā)項目比較多，在表單校驗功能中用popover插件實現(xiàn)出錯提示功能很方面，下面小編給大家?guī)砹艘黄P(guān)于Bootstrap的 popover插件實現(xiàn)校驗表單提示功能的實現(xiàn)代碼，非常不錯，感興趣的朋友一起看看吧2016-08-08
這篇文章主要介紹了詳解webpack 熱更新優(yōu)化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09