第16款插件:Spacegallery从远而近的缩放效果插件

描述：从远而近的缩放效果插件

兼容浏览器：IE6/IE7/IE8/IE9/Firefox/Google chrome

官方链接： http://www.eyecon.ro/spacegallery/

JS下载： http://ijquery.360sites.cn/js/spacegallery.js

预览： http://ijquery.360sites.cn/demo/spacegallery

打包下载： http://ijquery.360sites.cn/demo/spacegallery/spacegallery.zip

参数说明：

1. border          //整数,图片边框，默认是: 0
   
2. duration         //整数,动画持续时间，默认:800  
   
3. perspective      //整数,透视高度，默认: 140
   
4. minScale         //整型,背后图像的最小比例， 默认: 0.2
   
5. loadingClass     //字符串,加载图片时候把CSS样式加到元素里面，默认: null
   
6. before           //函数,下一个图片之前触发
   
7. after            //函数,下一个图片之后触发

复制代码

图片展示：



JS引用代码：

1. <script type="text/javascript" src="http://ijquery.360sites.cn/js/jquery-1.7.2.min.js"></script>
   
2. <script type="text/javascript" src="http://ijquery.360sites.cn/js/eye.js"></script>
   
3. <script type="text/javascript" src="http://ijquery.360sites.cn/js/utils.js"></script>
   
4. <script type="text/javascript" src="http://ijquery.360sites.cn/js/spacegallery.js"></script>
   
5. <script type="text/javascript">
   
6.         $(function(){
   
7.                 $('#myGallery').spacegallery();
   
8.         });
   
9. </script>

复制代码

HTML代码：

1. <div id="myGallery" class="spacegallery">
   
2.         <img src="images/bw3.jpg" alt="" />
   
3.         <img src="images/lights3.jpg" alt="" />
   
4.         <img src="images/bw2.jpg" alt="" />
   
5.         <img src="images/lights2.jpg" alt="" />
   
6.         <img src="images/bw1.jpg" alt="" />
   
7.         <img src="images/lights1.jpg" alt="" />
   
8. </div>

复制代码

CSS代码：

1. <link rel="stylesheet" media="screen" type="text/css" href="http://ijquery.360sites.cn/js/spacegallery.css" />
   
2. <style type="text/css">
   
3.         #myGallery{width:400px;height:300px;}
   
4. </style>

复制代码

注：spacegallery.css代码如下：

1. .spacegallery {
   
2.         position: relative;
   
3.         overflow: hidden;
   
4. }
   
5. .spacegallery img {
   
6.         position: absolute;
   
7.         left: 50%;
   
8. }
   
9. .spacegallery a {
   
10.         position: absolute;
    
11.         z-index: 1000;
    
12.         display: block;
    
13.         top: 0;
    
14.         left: 0;
    
15.         width: 100%;
    
16.         height: 100%;
    
17.         background: url(images/blank.gif);
    
18. }

复制代码

[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=16