苹果系统的Dock，很像很Cool

最新推荐文章于 2025-07-07 10:15:34 发布

原创最新推荐文章于 2025-07-07 10:15:34 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

技巧·经验&方法专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及JavaScript实现的Mac风格菜单栏交互案例。该案例通过鼠标移动事件调整菜单项大小，提供了良好的用户体验。文章详细展示了如何为每个菜单项设置点击反馈，并在鼠标移动时改变图标大小。

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);
});