基于jquery的鱼眼效果展示(fish eye)

项目中使用到的js,效果还可以，有图为证: 



 

     

把代码贴出来:

   test.html

-------------------------------------------------------------------------------------------------------------------------------------------------------------------- 


 

   

   
   
   
   
   
   
   

 
 
 
      

 


 


 


 


 


 


 


 

      
 


-------------------------------------------------------------------------------------------------------------------------------------------------------------

用到的js:

  jquery框架，iconDock(http://icon.cat/software/iconDock/),自己去下这个js

用到的图片:

    img/下有两张图片，一张图片是小图，一张是大图，格式可以是jpg、gif或者png;

说一下我示例中的图片命名，只要动手的同志肯定会注意到这个地方的，请注意图片的命名，不解释；

img/下的4个文件: icon_small.gif,icon_70.gif,这是地球的图标，一大一小；还有一个就是icon2_small.gif,icon2_70.gif,废纸篓图标；

说明:

    1、iconDock作为jquery的插件，必须先行载入jquery,此处示例我用到了jquery1.6.2;

    2、图标必须放在标签下，标签必须包含在标签中

    3、创建配置部分，即示例中的confObject

  ###############################################

var confObject = {
iconMinSide : 35,
iconMaxSide: 70,
distAttDock : 150,
coefAttDock : 2,
veloOutDock : 600,
valign : 'bottom'
}
##################################################

配置说明:

iconMinSide

Minimum length -in pixels- of the menu icons side.

Recommended values range: 20-50 pixels.




iconMaxSide

Maximum length -in pixels- of the menu icons side.

Recommended values range: 70-140 pixels.




distAttDock

Attenuation distance of the effect. Distance between the cursor position and the position where the effect ends.

Recommended values: They depend on the number of icons and the minimum size of them. A good value could be a third of the whole menu size when the mouse is not over it.

coefAttDock

Attenuation coefficient. Whether the attenuation is less or more progressive.

Recommended values range: 0.5-2.5.




veloOutDock

Restart velocity. Time between the mouse goes out of the menu and the icons get the initial position.

Recommended values range: 0.5-2 seconds.

valign

Vertical align of the menu icons.

Values: 'top', 'bottom' or 'middle'.



兼容的浏览器:

PC & Windows XP

Mozilla Firefox 2.0

Internet Explorer 6.0、 Internet Explorer 7.0 、

Apple Mac & Mac OS X

Mozilla Firefox 1.5

Safari 2.0

 

全部示例代码文件已随附件上传，需要的同志可自行下载参考。