用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

仿苹果电脑任务栏菜单

2012-09-16 作者: 神马举报

[javascript]代码库

<!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://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /><img src="http://yuncode.net/upload/headicon/default.jpg" /></div>
</body>
</html>

[代码运行效果截图]


仿苹果电脑任务栏菜单


网友评论    (发表评论)

共2 条评论 1/1页

发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。


扫码下载

加载中,请稍后...

输入口令后可复制整站源码

加载中,请稍后...