会python真的可以为所欲为0(回)
365天前
这里还有人吗1(回)
550天前这里还有人吗0(回)
550天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
775天前到处都是羊，不想上班0(回)
855天前
鸽子
0(回)
859天前<!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> |
高级设计师
by: 小蜜锋 发表于：2012-09-17 12:15:39 顶(0) | 踩(0) 回复
不错，很平滑流畅！
回复评论