`
mewleo
  • 浏览: 74884 次
  • 性别: Icon_minigender_1
  • 来自: 济南
最近访客 更多访客>>
社区版块
存档分类
最新评论

苹果系统的Dock,很像很Cool

阅读更多

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);
});
 
分享到:
评论

相关推荐

    仿苹果dock栏

    【标题】"仿苹果Dock栏"指的是在非苹果操作系统中,使用类似苹果Mac OS系统Dock栏功能的应用程序。Dock栏是苹果操作系统中的一个重要特性,它提供了一种方便快捷的方式来启动和切换应用程序,以及管理和访问常用文件...

    在windows系统上逼真模拟苹果Mac Dock

    标题中的“在Windows系统上逼真模拟苹果Mac Dock”指的是使用第三方软件来在Windows操作系统上重现苹果Mac电脑上的Dock功能。Mac Dock是Mac OS X(现称macOS)中的一个核心特性,它提供了一个直观的方式来启动应用...

    windows 一款模拟 苹果系统的dock

    windows下 一款模拟 苹果系统的dock,好东东,很好的操作性。。。

    RocketDock苹果工具条

    它的设计灵感来源于苹果Mac OS X操作系统中的Dock,为Windows系统带来了类似的功能和视觉体验。RocketDock以其独特的风格和强大的功能,使得桌面管理变得更加便捷和美观。 首先,RocketDock的“超酷设计”体现在其...

    ubuntu仿苹果dock的awn(1)

    ubuntu下仿苹果dock的一个工具awn 请继续下完“ubuntu仿苹果dock的awn(2)”后到以下网址按教程安装 http://forum.ubuntu.org.cn/viewtopic.php?t=95651&highlight=awn

    jquery插件-仿苹果菜单dock-menu

    至于“dock-menu”,这是菜单的一种特定设计,灵感来自苹果操作系统中的Dock栏。Dock菜单通常包含可点击的图标,当鼠标靠近时,图标会放大或改变位置,以提供视觉反馈。这种设计不仅美观,还能提高用户体验,因为它...

    模仿苹果电脑DOCK栏安装包.zip

    在Windows系统中,许多用户喜欢苹果Mac电脑的DOCK栏设计,因为它提供了高效且美观的任务管理方式。这个“模仿苹果电脑DOCK栏安装包”旨在为Windows用户带来类似的功能体验,使得用户可以在自己的电脑上享受Mac DOCK...

    苹果桌面UI Fasheye dock源码

    苹果桌面UI Fasheye dock源码是一种基于C++实现的桌面界面元素,它模仿了苹果操作系统中的Dock功能。Dock是苹果系统中的一个重要组件,它允许用户快速访问常用的应用程序、文档和文件夹,同时也提供了视觉上的反馈...

    rk_launcher模拟苹果dock

    "rk_launcher模拟苹果dock"是一款专为用户打造的桌面插件,旨在为非苹果设备提供类似苹果MacOS系统中的Dock栏体验。这款小巧且美观的工具,能够让你的Windows或其他非苹果操作系统拥有苹果风格的底部任务栏,提升...

    flash as 脚本 苹果dock菜单效果

    【标题】"Flash AS 脚本:苹果Dock菜单效果"揭示了如何使用ActionScript(AS)在Flash环境中实现类似苹果操作系统Dock的动态菜单。这种效果通常涉及到图标滑入滑出、缩放以及平滑过渡等动画效果,使得用户界面更具...

    RocketDock(仿苹果效果)\RocketDock_Leopard3D.rar

    RocketDock是一款流行的应用程序启动器,它为Windows用户提供了类似苹果Mac OS X的Dock效果。这个软件能够让你的桌面变得更加整洁高效,通过一个动态的图标栏来启动和管理你的常用程序。RocketDock的设计理念是模仿...

    CSS:苹果DOCK导航栏

    苹果Dock是Mac操作系统中一个标志性元素,它允许用户快速访问常用的应用程序或文件夹。使用CSS来模仿这样的功能,我们可以创建一个固定在浏览器底部、响应式且具有良好视觉效果的导航栏。下面将详细介绍如何使用CSS...

    纯CSS3实现仿Mac系统的Dock菜单

    很早以前我们给大家分享过几款基于jQuery和CSS3的Mac Dock菜单,比如这款jQuery Dock菜单 可悬浮页面两侧和这款jQuery/CSS3实现仿苹果的CoverFlow图片切换都非常炫酷和实用。今天给大家带来的是另外一款基于纯CSS3的...

    js 脚本 苹果dock菜单效果

    在本项目中,我们探讨的是如何使用JS脚本来实现一个类似苹果操作系统Dock菜单的效果。Dock菜单是苹果Mac OS系统中标志性的一个功能,它允许用户快速访问常用的应用程序、文件夹和文档。通过JavaScript,我们可以为...

    apple dock for xp

    Apple Dock for XP是一款专为Windows XP操作系统设计的桌面美化工具,它模仿了苹果Mac OS X系统中的Dock功能,为用户提供了一种时尚、高效的任务管理和快捷方式启动方式。Dock在Mac OS X中是一个标志性特征,它允许...

    win7系统仿苹果任务栏rocketdock使用教程.docx

    10. **优化性能**:对于运行多个程序的用户,可以考虑使用像Rainmeter这样的监控软件,以实时查看系统资源使用情况,确保RocketDock和其他程序的流畅运行。 通过以上步骤,你就可以充分利用RocketDock,使Windows...

    jQuery实现苹果Dock样式的菜单

    苹果Dock是Mac操作系统中的一个标志性元素,它提供了一种美观且直观的方式来展示和访问应用程序。通过使用JavaScript库jQuery,我们可以创建类似的效果,为网页添加动态和交互性的菜单。 首先,我们需要理解jQuery...

    苹果系统图标ICO苹果系统图标

    标题中的“苹果系统图标ICO”指的是在苹果操作系统中使用的图标文件,这些图标具有特定的格式,即ICO。ICO是一种图像文件格式,主要用于Windows系统中,它能存储多个不同尺寸和颜色深度的图标,以便在不同的显示环境...

    js实现仿苹果dock栏导航特效.zip

    在JavaScript的世界里,实现动态和交互性的用户界面是开发者们常用的一种技巧,而"js实现仿苹果dock栏导航特效.zip"就是一个很好的实例,它利用jQuery库来创建类似于苹果操作系统Dock栏的导航效果。这个特效主要关注...

    dock_menu.zip仿苹果菜单

    【描述】中的“真的很酷,下下来你就知道了”暗示了这个菜单设计或实现有独特的视觉吸引力和交互体验,可能包括了类似苹果Dock栏的动画效果,如图标放大、平滑滚动等,这些都需要通过编程技巧和图形用户界面(GUI)...

Global site tag (gtag.js) - Google Analytics