`
maolin
  • 浏览: 11726 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

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



  示例说明

     

把代码贴出来:

   test.html

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

<html>
  <head>

    <title>测试鱼眼</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.dock-0.8b.source.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
       var confObject = {
                       iconMinSide : 35,
                       iconMaxSide: 70,
                       distAttDock : 150,
                       coefAttDock : 2,
                       veloOutDock : 600,
                       valign : 'bottom'
       }
      
        jQuery(function() {
   jQuery("#imgs").addDockEffect(confObject);
});


    </script>

  </head>
 
  <body>
       <div id="imgs">
<a href="http://www.baidu.com" name="Alertes_name" title="测试地球">
  <img src="img/icon_small.gif" alt="测试地球1" border="0" />
</a>
<a href="http://www.baidu.com" name="Escriptori_name" title="废纸篓">
  <img src="img/icon2_small.gif" alt="废纸篓1" border="0" />
</a>
<a href="http://www.baidu.com" name="Alertes_name" title="测试地球">
  <img src="img/icon_small.gif" alt="测试地球1" border="0" />
</a>
<a href="http://www.baidu.com" name="Escriptori_name" title="废纸篓">
  <img src="img/icon2_small.gif" alt="废纸篓1" border="0" />
</a>
<a href="http://www.baidu.com" name="Alertes_name" title="测试地球">
  <img src="img/icon_small.gif" alt="测试地球1" border="0" />
</a>
<a href="http://www.baidu.com" name="Escriptori_name" title="废纸篓">
  <img src="img/icon2_small.gif" alt="废纸篓1" border="0" />
</a>
<a href="http://www.baidu.com" name="Alertes_name" title="测试地球">
  <img src="img/icon_small.gif" alt="测试地球1" border="0" />
</a>
<a href="http://www.baidu.com" name="Escriptori_name" title="废纸篓">
  <img src="img/icon2_small.gif" alt="废纸篓1" border="0" />
</a>

</div>
      
  </body>
</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、图标必须放在<img>标签下，<img>标签必须包含在<a>标签中

    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

 

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


 

分享到：
| 使用JS查找XML内部节点与属性值
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics