漂亮的FishEye菜单

aideehorn · 发表于 2013-1-29 07:48:35

我们都喜欢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/..."换成你自己的网站下相应路径。
<a name="entrymore" />
3.将下面的代码加到你的页面中你就可以看到fisheye menu的效果了。
<div><ul id="fisheye_menu">
  <li><a xhref="http://www.mokha.cn/admin.php#1"><imgxsrc="http://YourWebsite/icon.gif" alt="image description"/><span>Icon 1</span></a></li>
  <li><a xhref="http://www.mokha.cn/admin.php#2"><imgxsrc="http://YourWebsite/icon2.gif" alt="image description"/><span>Icon 2</span></a></li>
  <li><a xhref="http://www.mokha.cn/admin.php#3"><imgxsrc="http://YourWebsite/icon.gif" alt="image description"/><span>Icon 3</span></a></li>
  <li><a xhref="http://www.mokha.cn/admin.php#4"><imgxsrc="http://YourWebsite/icon2.gif" alt="image description"/><span>Icon 4</span></a></li>
  <li><a xhref="http://www.mokha.cn/admin.php#5"><imgxsrc="http://YourWebsite/icon.gif" alt="image description"/><span>Icon 5</span></a></li>
  <li><a xhref="http://www.mokha.cn/admin.php#6"><imgxsrc="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

		自动登录	找回密码
密码			立即注册