描述:从远而近的缩放效果插件
兼容浏览器:IE6/IE7/IE8/IE9/Firefox/Google chrome
官方链接: http://www.eyecon.ro/spacegallery/
JS下载: http://www.ijquery.cn/js/spacegallery.js
预览: http://www.ijquery.cn/study/demo/spacegallery
打包下载: http://www.ijquery.cn/study/demo/spacegallery/spacegallery.zip
参数说明:
border //整数,图片边框,默认是: 0
duration //整数,动画持续时间,默认:800
perspective //整数,透视高度,默认: 140
minScale //整型,背后图像的最小比例, 默认: 0.2
loadingClass //字符串,加载图片时候把CSS样式加到元素里面,默认: null
before //函数,下一个图片之前触发
after //函数,下一个图片之后触发
图片展示:
JS引用代码:
[js]<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/eye.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/utils.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/spacegallery.js"></script>
<script type="text/javascript">
$(function(){
$('#myGallery').spacegallery();
});
</script>[/js]
HTML代码:
[html]
<div id="myGallery">
<img src="images/bw3.jpg" alt="" />
<img src="images/lights3.jpg" alt="" />
<img src="images/bw2.jpg" alt="" />
<img src="images/lights2.jpg" alt="" />
<img src="images/bw1.jpg" alt="" />
<img src="images/lights1.jpg" alt="" />
</div>
[/html]
CSS代码:
[css]
<link rel="stylesheet" media="screen" type="text/css" href="http://www.ijquery.cn/js/spacegallery.css" />
<style type="text/css">
#myGallery{width:400px;height:300px;}
</style>
[/css]
注:spacegallery.css代码如下:
[css]
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(images/blank.gif);
}
[/css]