当前位置：首页 > 网页特效 > 导航菜单 >

仿苹果菜单，底部任务栏菜单

时间：2013-04-01 21:08 来源：互联网作者：源码搜藏收藏推荐

<!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>仿苹果电脑任务栏菜单</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>
</head>
<body>
<div id="menu">
	<img src="http://www.codefans.net/jscss/demoimg/201301/1.png" />
    <img src="http://www.codefans.net/jscss/demoimg/201301/2.png" />
    <img src="http://www.codefans.net/jscss/demoimg/201301/3.png" />
    <img src="http://www.codefans.net/jscss/demoimg/201301/4.png" />
    <img src="http://www.codefans.net/jscss/demoimg/201301/5.png" />
    <img src="http://www.codefans.net/jscss/demoimg/201301/6.png" />
    <img src="http://www.codefans.net/jscss/demoimg/201301/7.png" />
    <img src="http://www.codefans.net/jscss/demoimg/201301/8.png" />
</div>
</body>
</html>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

仿苹果电脑的底部任务栏菜单，纯JavaScript实现的菜单特效，鼠标放上有响应效果，菜单图标会变大，而且动画效果非常流畅，以前发过这种效果，但是是使用了jQuery实现的，今天这个没有jQuery插件哦。由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-daohang/1008.html

网页特效

仿苹果菜单，底部任务栏菜单

导航菜单下载排行

最新文章