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

最新推荐文章于 2023-01-10 23:24:53 发布

sunmaolin5003

最新推荐文章于 2023-01-10 23:24:53 发布

阅读量607

点赞数

文章标签： javascript 操作系统 ViewUI

本文链接：https://blog.csdn.net/sunmaolin5003/article/details/83981927

版权

项目中使用到的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>
    
    <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

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

sunmaolin5003

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于jquery的鱼眼效果展示(fish eye)

项目中使用到的js,效果还可以，有图为证: 把代码贴出来: test.html -----------------------------------------------------------------------------------------------------------------------------------------------------...
复制链接

扫一扫