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)事件及頁面元素遍歷并修改屬性的技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)仿蘋果底部任務(wù)欄菜單效果代碼。分享給大家供大家參考。具體如下：
這款仿蘋果電腦的底部任務(wù)欄菜單，是純JavaScript實(shí)現(xiàn)的菜單特效，鼠標(biāo)放上有響應(yīng)效果，菜單圖標(biāo)會變大，而且動(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>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js實(shí)現(xiàn)頂部可折疊的菜單工具欄效果實(shí)例
- Extjs學(xué)習(xí)筆記之四 工具欄和菜單
- JS實(shí)現(xiàn)自動(dòng)固定頂部的懸浮菜單欄效果
- 基于vue.js實(shí)現(xiàn)側(cè)邊菜單欄
- 使用ReactJS實(shí)現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
- 簡單實(shí)現(xiàn)js菜單欄切換效果
- 原生JS仿蘋果任務(wù)欄菜單，放大效果的菜單
- JavaScript NodeTree導(dǎo)航欄(菜單項(xiàng)JSON類型/自制)
- 非?？岬膉s圖形漸隱導(dǎo)航菜單欄
- JS實(shí)現(xiàn)左側(cè)菜單工具欄
相關(guān)文章
javaScript動(dòng)態(tài)添加Li元素的實(shí)例
下面小編就為大家分享一篇javaScript動(dòng)態(tài)添加Li元素的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧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à)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
如何用JS/HTML將時(shí)間戳轉(zhuǎn)換為“xx天前”的形式
如果我們有一份過去時(shí)間戳，如何使用JS/HTML將時(shí)間戳轉(zhuǎn)換為“xx天前”的形式呢？很多朋友都覺得解決辦法有點(diǎn)困難，其實(shí)很簡單的，下面小編給大家分享完整的實(shí)現(xiàn)代碼，一起看看吧2017-02-02
這篇文章主要介紹了微信小程序文件下載視頻和圖片，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JS實(shí)現(xiàn)TITLE懸停長久顯示效果完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)TITLE懸停長久顯示效果,結(jié)合完整實(shí)例形式分析了JavaScript鼠標(biāo)事件響應(yīng)及頁面元素屬性動(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![對google個(gè)性主頁的拖拽效果的js的完整注釋[轉(zhuǎn)]](http://img.jbzj.com/images/xgimg/bcimg7.png)
對google個(gè)性主頁的拖拽效果的js的完整注釋[轉(zhuǎn)]
對google個(gè)性主頁的拖拽效果的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)化，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09