Home > Article > Web Front-end > 原生JS仿苹果任务栏菜单，放大效果的菜单_导航菜单

原生JS仿苹果任务栏菜单，放大效果的菜单_导航菜单

WBOYOriginal: 2016-05-16 18:03:431258browse

相信本菜单会让你学习到一些新鲜的JS技巧。

<title>JS仿苹果任务栏菜单</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> 
 
 
<div id="menu"> 
<img  src="/jscss/demoimg/201108/1.png" alt="原生JS仿苹果任务栏菜单，放大效果的菜单_导航菜单" > 
<img  src="/jscss/demoimg/201108/2.png" alt="原生JS仿苹果任务栏菜单，放大效果的菜单_导航菜单" > 
<img  src="/jscss/demoimg/201108/3.png" alt="原生JS仿苹果任务栏菜单，放大效果的菜单_导航菜单" > 
<img  src="/jscss/demoimg/201108/4.png" alt="原生JS仿苹果任务栏菜单，放大效果的菜单_导航菜单" > 
<img  src="/jscss/demoimg/201108/5.png" alt="原生JS仿苹果任务栏菜单，放大效果的菜单_导航菜单" > 
<img  src="/jscss/demoimg/201108/6.png" alt="原生JS仿苹果任务栏菜单，放大效果的菜单_导航菜单" > 
<img  src="/jscss/demoimg/201108/7.png" alt="原生JS仿苹果任务栏菜单，放大效果的菜单_导航菜单" > 
<img  src="/jscss/demoimg/201108/8.png" alt="原生JS仿苹果任务栏菜单，放大效果的菜单_导航菜单" > 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js字符串的各种格式的转换 ToString，Format_javascript技巧Next article：Jquery ajax传递复杂参数给WebService的实现代码_jquery

See more

原生JS仿苹果任务栏菜单，放大效果的菜单_导航菜单

Related articles