jQuery插件—fisheye实现仿苹果系统鱼眼菜单效果

jQuery插件fisheye实现仿苹果系统鱼眼菜单效果-必优博客

下面介绍一个jQuery插件fisheye仿苹果系统鱼眼菜单，使用简单，只需要配置三个参数，效果图如下： 使用说明 需要使用jQuery库文件和fisheye库文件 http://jquery.com/ http://plugins.jquery.com/project/fisheye 并自定义菜单的CSS样式，实例CSS代码如下： #biuuu { border: 1px solid #666; clear: both; height: 50px; z-index: 1000; } .FishEye { margin: 2px; padding: 5px; float: left; vertical-align: middle; } .FishEyeStandard { height: 40px; width: 40px; } 使用实例 一，包含文件部分 <script src="jquery-1.3.2.min.js" type="text/javascript"></script> <script src="jquery.fisheye.js" type="text/javascript"></script> 二，HTML部分 <div id="biuuu"> <img class="FishEye FishEyeStandard" src="images/home.png" /> <img class="FishEye FishEyeStandard" src="images/email.png" /> <img class="FishEye FishEyeStandard" src="images/display.png" /> <img class="FishEye FishEyeStandard" src="images/clock.png" /> <img class="FishEye FishEyeStandard" src="images/web.png" /> <img class="FishEye FishEyeStandard" src="images/home.png" /> <img class="FishEye FishEyeStandard" src="images/email.png" /> <img class="FishEye FishEyeStandard" src="images/display.png" /> <img class="FishEye FishEyeStandard" src="images/clock.png" /> <img class="FishEye FishEyeStandard" src="images/web.png" /> </div> 三，Javascript部分 <script type="text/javascript"> $(document).ready(function(){ $("#biuuu").FishEye({ fishEyeItemName: ".FishEye", maxScalePct: 180, scaleStepPct: 60 }); }); </script> 三个参数分别是： fishEyeItemName表示需要增加鱼眼效果元素的类名，如：.FishEye maxScalePct表示扩展显示的百分比，指鼠标当前指向的元素。 scaleStepPct表示周边扩展的百分比，指鼠标指向旁边的元素。 实例可知，使用jQuery插件fisheye实现仿苹果系统鱼眼菜单效果非常简单。 点我查看fisheye文档说明 http://www.iansuttle.com/blog/page/jQuery-FishEye-Plugin.aspx 点我下载fisheye演示源代码 http://jquerycodes.googlecode.com/files/fisheye.rar (责任编辑：admin)

http://0710job.w201.mydnns.cn/program/Ajax/2010/0415/2025.html