我们都喜欢MAC,喜欢FishEye菜单。
实际上整合fisheye到你的项目中非常简单。
你所需要的是javascript,CSS和你的所用到的图片。你可以去下载FisheyeMenu.
URL:http://simply-basic.com/wp-content/uploads/image/fisheyemenu/fisheyemenu.zip
下面就说说怎么安装吧:
1.将解压的ZIP包中的所有文件(注:images目录下的图片可以行更换)上传到你的网站。
2.添加下面的代码到<head></head>之间
<link rel="stylesheet" type="text/css" xhref="http://YourDomainHere/fisheye-menu.css" />
<script xsrc="http://YourDomainHere/fisheye.js" type='text/javascript'></script>
当然你还需要将"http://YourDomainHere/..."换成你自己的网站下相应路径。
3.将下面的代码加到你的页面中你就可以看到fisheye menu的效果了。
<div><ul id="fisheye_menu">
<li><a xhref="http://www.mokha.cn/admin.php#1"><img
xsrc="http://YourWebsite/icon.gif" alt="image description"
/><span>Icon 1</span></a></li>
<li><a xhref="http://www.mokha.cn/admin.php#2"><img
xsrc="http://YourWebsite/icon2.gif" alt="image description"
/><span>Icon 2</span></a></li>
<li><a xhref="http://www.mokha.cn/admin.php#3"><img
xsrc="http://YourWebsite/icon.gif" alt="image description"
/><span>Icon 3</span></a></li>
<li><a xhref="http://www.mokha.cn/admin.php#4"><img
xsrc="http://YourWebsite/icon2.gif" alt="image description"
/><span>Icon 4</span></a></li>
<li><a xhref="http://www.mokha.cn/admin.php#5"><img
xsrc="http://YourWebsite/icon.gif" alt="image description"
/><span>Icon 5</span></a></li>
<li><a xhref="http://www.mokha.cn/admin.php#6"><img
xsrc="http://YourWebsite/icon2.gif" alt="image description"
/><span>Icon 6</span></a></li>
</ul></div>
4.如果你想改变图片大小或图片的扩展名,你可编辑fisheye.js,在前面几行可以看到如下代码:
var fisheyemenu = {
startSize : 55,
endSize : 88,
imgType : ".gif",
将其中的参数改成你想要的就可以了。
更多信息你参看:http://simply-basic.com/posts/19419
分享到:
相关推荐
本篇将详细介绍如何在WinForms中创建一个“非常漂亮”的菜单,并提供相关资源。 标题中的“winfrom非常漂亮的菜单”指的是在Windows Forms应用中设计出吸引眼球且功能完善的菜单系统。在WinForms中,我们通常使用...
【C# Winform漂亮菜单】是针对Windows桌面应用程序开发者,特别是使用C#语言进行Winform界面设计的程序员的一个宝贵资源。这个主题主要关注如何在Windows窗体应用中创建美观、吸引人的用户界面,尤其是菜单部分。...
"漂亮三级菜单 导航菜单 菜单"这个标题暗示我们关注的是一个多级菜单系统,它可能具有良好的视觉吸引力和易用性,适用于组织复杂的网站结构。这种菜单通常包括主菜单、次级菜单以及更深层次的子菜单,帮助用户方便地...
"仿win7web菜单导航条菜单下拉菜单漂亮的菜单经典的菜单"这一主题着重于模仿Windows 7操作系统中的菜单样式,将这种熟悉且直观的用户体验应用到网页中,提升用户的交互体验。 首先,"win7 导航条"指的是借鉴了...
"漂亮的菜单制作js脚本"是一个使用JavaScript技术来创建具有动态效果的菜单的实例,它允许菜单从侧面弹出并能够优雅地收回,提升了网页的视觉吸引力和功能性。 JavaScript是一种广泛应用于客户端Web开发的脚本语言...
本文将详细介绍“多个简单漂亮的树型菜单JS代码”这一主题,以及如何利用提供的资源进行应用。 首先,标题中的“多个简单漂亮的树型菜单JS代码”意味着我们拥有若干个不同设计风格且易于实现的JavaScript树形菜单...
标题"漂亮的菜单样式"表明我们关注的焦点在于设计出既吸引眼球又实用的菜单效果。描述中提到的“当鼠标放上去是出来,鼠标移走回收回去”,这通常指的是悬停效果,即鼠标指针悬浮在菜单项上时显示详细内容或子菜单,...
在网页设计中,一个漂亮的菜单不仅能让用户界面更吸引人,还能提升用户体验。 描述中提到“相当好用的学习资料”,这可能是一个适合初学者或有一定基础的学习者使用的教程或案例集合,旨在帮助他们理解和创建自己的...
以下是对"wpf自定义漂亮的二级菜单"这一主题的详细解释。 首先,我们来理解WPF中的菜单系统。在WPF中,`Menu`控件用于展示层级结构的选项,通常用于应用程序的顶部或侧边栏。`MenuItem`是`Menu`的基本元素,可以...
本资源包含一组“超实用漂亮精美html菜单源码”,适用于希望提升网页交互体验的开发者。这些源码集美观与实用性于一体,能帮助你快速构建出吸引用户的网页菜单。 HTML(HyperText Markup Language)是网页开发的...
本文将详细探讨“漂亮的下拉菜单导航”的实现及其相关知识点。 首先,我们要明白下拉菜单的基本原理。它通常是通过JavaScript、jQuery或者CSS来实现的,当用户悬停在主菜单项上时,与其关联的子菜单会滑动出现。...
"js漂亮的菜单栏"着重关注使用JavaScript实现的动态、交互式的菜单栏。JavaScript是一种广泛应用于网页开发的客户端脚本语言,它能够为静态HTML页面注入活力,提供丰富的用户交互功能。 在创建“js漂亮的菜单栏”时...
"经典完美漂亮菜单集锦"这个资源显然提供了一系列精心设计且功能完善的菜单代码示例,适用于那些希望提升其应用或网站用户体验的开发者。这些菜单代码不仅注重美学,也强调实用性,以C语言为基础,为程序员提供了...
"超漂亮的导航菜单"这个主题,显然聚焦于美观且用户友好的导航设计。这样的菜单不仅可以提升用户体验,还能增强品牌形象,使网站或应用更具吸引力。 1. **导航菜单设计原则**:一个优秀的导航菜单应该简洁明了,...
VueCircleMenu是一个基于Vue.js框架开发的精美圆形菜单组件,专为前端开发者设计,用于创建具有吸引力和用户体验友好的交互式界面。Vue.js是目前非常流行的一个轻量级、高性能的JavaScript框架,它以组件化开发为...
"android超漂亮菜单" 提供了一种实现方法,它以丝般顺滑的操作感和独特的视觉效果吸引用户。下面我们将深入探讨如何在Android中创建这样的菜单,以及与之相关的技术点。 首先,`AndroidManifest.xml`是每个Android...
这种菜单布局使得网站导航更为直观,尤其适用于移动设备或空间有限的界面。本文将深入探讨如何使用HTML和CSS来创建美观的竖排菜单。 首先,我们需要了解HTML的基本结构。HTML(超文本标记语言)用于定义网页的内容...
本文将详细探讨“13个漂亮的JS导航菜单”这一主题,解析这些菜单的设计理念、实现方式以及它们如何提升用户体验。 首先,我们关注的是JS(JavaScript)在创建动态导航菜单中的作用。JavaScript是一种强大的客户端...
"非常漂亮的JQUERY多级菜单"是一个利用jQuery库和CSS样式来创建的高效且美观的菜单解决方案。下面将详细探讨这个主题,包括jQuery的基本概念、多级菜单的设计原理以及如何利用CSS实现美观的效果。 ### jQuery简介 ...
本资源包“20款漂亮的菜单”专注于提升网站的用户体验和视觉吸引力,为你的网页增添风格。这些菜单设计既实用又美观,无需复杂的编程,可以直接应用到你的网站上,简化了开发流程。 动态菜单是现代网页设计中的一个...