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栏"指的是在非苹果操作系统中,使用类似苹果Mac OS系统Dock栏功能的应用程序。Dock栏是苹果操作系统中的一个重要特性,它提供了一种方便快捷的方式来启动和切换应用程序,以及管理和访问常用文件...
标题中的“在Windows系统上逼真模拟苹果Mac Dock”指的是使用第三方软件来在Windows操作系统上重现苹果Mac电脑上的Dock功能。Mac Dock是Mac OS X(现称macOS)中的一个核心特性,它提供了一个直观的方式来启动应用...
windows下 一款模拟 苹果系统的dock,好东东,很好的操作性。。。
它的设计灵感来源于苹果Mac OS X操作系统中的Dock,为Windows系统带来了类似的功能和视觉体验。RocketDock以其独特的风格和强大的功能,使得桌面管理变得更加便捷和美观。 首先,RocketDock的“超酷设计”体现在其...
ubuntu下仿苹果dock的一个工具awn 请继续下完“ubuntu仿苹果dock的awn(2)”后到以下网址按教程安装 http://forum.ubuntu.org.cn/viewtopic.php?t=95651&highlight=awn
至于“dock-menu”,这是菜单的一种特定设计,灵感来自苹果操作系统中的Dock栏。Dock菜单通常包含可点击的图标,当鼠标靠近时,图标会放大或改变位置,以提供视觉反馈。这种设计不仅美观,还能提高用户体验,因为它...
在Windows系统中,许多用户喜欢苹果Mac电脑的DOCK栏设计,因为它提供了高效且美观的任务管理方式。这个“模仿苹果电脑DOCK栏安装包”旨在为Windows用户带来类似的功能体验,使得用户可以在自己的电脑上享受Mac DOCK...
苹果桌面UI Fasheye dock源码是一种基于C++实现的桌面界面元素,它模仿了苹果操作系统中的Dock功能。Dock是苹果系统中的一个重要组件,它允许用户快速访问常用的应用程序、文档和文件夹,同时也提供了视觉上的反馈...
"rk_launcher模拟苹果dock"是一款专为用户打造的桌面插件,旨在为非苹果设备提供类似苹果MacOS系统中的Dock栏体验。这款小巧且美观的工具,能够让你的Windows或其他非苹果操作系统拥有苹果风格的底部任务栏,提升...
【标题】"Flash AS 脚本:苹果Dock菜单效果"揭示了如何使用ActionScript(AS)在Flash环境中实现类似苹果操作系统Dock的动态菜单。这种效果通常涉及到图标滑入滑出、缩放以及平滑过渡等动画效果,使得用户界面更具...
RocketDock是一款流行的应用程序启动器,它为Windows用户提供了类似苹果Mac OS X的Dock效果。这个软件能够让你的桌面变得更加整洁高效,通过一个动态的图标栏来启动和管理你的常用程序。RocketDock的设计理念是模仿...
苹果Dock是Mac操作系统中一个标志性元素,它允许用户快速访问常用的应用程序或文件夹。使用CSS来模仿这样的功能,我们可以创建一个固定在浏览器底部、响应式且具有良好视觉效果的导航栏。下面将详细介绍如何使用CSS...
很早以前我们给大家分享过几款基于jQuery和CSS3的Mac Dock菜单,比如这款jQuery Dock菜单 可悬浮页面两侧和这款jQuery/CSS3实现仿苹果的CoverFlow图片切换都非常炫酷和实用。今天给大家带来的是另外一款基于纯CSS3的...
在本项目中,我们探讨的是如何使用JS脚本来实现一个类似苹果操作系统Dock菜单的效果。Dock菜单是苹果Mac OS系统中标志性的一个功能,它允许用户快速访问常用的应用程序、文件夹和文档。通过JavaScript,我们可以为...
Apple Dock for XP是一款专为Windows XP操作系统设计的桌面美化工具,它模仿了苹果Mac OS X系统中的Dock功能,为用户提供了一种时尚、高效的任务管理和快捷方式启动方式。Dock在Mac OS X中是一个标志性特征,它允许...
10. **优化性能**:对于运行多个程序的用户,可以考虑使用像Rainmeter这样的监控软件,以实时查看系统资源使用情况,确保RocketDock和其他程序的流畅运行。 通过以上步骤,你就可以充分利用RocketDock,使Windows...
苹果Dock是Mac操作系统中的一个标志性元素,它提供了一种美观且直观的方式来展示和访问应用程序。通过使用JavaScript库jQuery,我们可以创建类似的效果,为网页添加动态和交互性的菜单。 首先,我们需要理解jQuery...
标题中的“苹果系统图标ICO”指的是在苹果操作系统中使用的图标文件,这些图标具有特定的格式,即ICO。ICO是一种图像文件格式,主要用于Windows系统中,它能存储多个不同尺寸和颜色深度的图标,以便在不同的显示环境...
在JavaScript的世界里,实现动态和交互性的用户界面是开发者们常用的一种技巧,而"js实现仿苹果dock栏导航特效.zip"就是一个很好的实例,它利用jQuery库来创建类似于苹果操作系统Dock栏的导航效果。这个特效主要关注...
【描述】中的“真的很酷,下下来你就知道了”暗示了这个菜单设计或实现有独特的视觉吸引力和交互体验,可能包括了类似苹果Dock栏的动画效果,如图标放大、平滑滚动等,这些都需要通过编程技巧和图形用户界面(GUI)...