苹果系统的Dock，很像很Cool

mewleo

浏览: 75168 次
性别:
来自: 济南

最近访客更多访客>>

颜墨阳

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

技巧·经验&方法

JavaScript HTML

macdock.html

<html>
<head>
<title>Mac Menu</title>
<script src="js/pro.js" type="text/javascript"></script>
<style>
#menuBar{ width: 100%; text-align: center; position: relative; }
#menuitems { text-align: center; margin-left: auto; margin-right: auto; width: 200px; }
.menuitem { vertical-align: top; display: inline; background-color: #f00; }
.menuitem img { vertical-align: top; width: 20px; height: 20px; border: 0px; }
#logDiv { font-size: 10px; }
</style>
</head>
<body>
	<div id="menubar">
		<div id="menuitems">
			<div class="menuitem"><img onclick="alert(this.id);" src="test2.jpg" id="img1"></div>
			<div class="menuitem"><img onclick="alert(this.id);" src="test2.jpg" id="img2"></div>
			<div class="menuitem"><img onclick="alert(this.id);" src="test2.jpg" id="img3"></div>
			<div class="menuitem"><img onclick="alert(this.id);" src="test2.jpg" id="img4"></div>
			<div class="menuitem"><img onclick="alert(this.id);" src="test2.jpg" id="img5"></div>
			<div class="menuitem"><img onclick="alert(this.id);" src="test2.jpg" id="img6"></div>
		</div>
	</div>
	<div id="position"></div>
	<div id="logDiv"></div>
</body>
</html>

pro.js

var maxDist = 0;

function mousemove(e) {
	var eX = Position.page($('menuitems'))[0];
	var eY = Position.page($('menuitems'))[1];
	var eWidth = parseInt($('menuitems').getStyle('width'));
	var pX = Event.pointerX(e);
	var pY = Event.pointerY(e);
	var imgs = $('menuitems').immediateDescendants();
	for (var i = 0; i < imgs.length; i++) {
		var distFromMouse = calcDistFromMouse(pX, pY, imgs[i].firstDescendant());
		if (distFromMouse < 45) {
			var newSize = parseInt(distFromMouse * (-0.4) + 50);
			imgs[i].firstDescendant().setStyle({ width: newSize, height: newSize});
		} else {
			imgs[i].firstDescendant().setStyle({ width: 20, height: 20});
		}
	}
}

function resetScaling () {
	var imgs = $('menuitems').immediateDescendants();
	for (var i = 0; i < imgs.length; i++) {
		var newSize = 20;
		imgs[i].setStyle({ width: newSize, height: newSize});
	}
}

function calcDistFromMouse(mX, mY, elem) {
	var elemCenterX = parseInt(Position.page(elem)[0]) + (parseInt(elem.getStyle('width')) / 2);
	var elemCenterY = parseInt(Position.page(elem)[1]) + (parseInt(elem.getStyle('height')) / 2);
	var distance = parseInt(Math.sqrt((elemCenterX - mX) * (elemCenterX - mX) + (elemCenterY - mY) * (elemCenterY - mY)));
	return distance;
}

function checkMousePos(pX, pY, eX, eY, eWidth ){
	if (pY - eY > 200)
		return false;
	if (pX > eX) {
		if (pX - (eX + eWidth) > 200)
			return false;
	} else {
		if (eX - pX > 200)
			return false;
	}
	return true;
}

Event.observe(window,'load', function() {
  Event.observe(document,'mousemove',mousemove, false);
});

分享到：

苹果的国际化感谢语 | ISV订购接口规范

2009-02-11 21:17
浏览 964
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

苹果系统的Dock，很像很Cool

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

苹果系统的Dock，很像很Cool

评论

发表评论

相关推荐

收集淘宝店铺资料的小程序

我回来了，我到家了

InfoQ:软件开发中的7大浪费

公司成立，纪念一下

小解密码锁

第一次发新闻通过，纪念一下

感悟js的一段代码

MusicScript

最近访客更多访客>>