项目中使用到的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
全部示例代码文件已随附件上传,需要的同志可自行下载参考。