最新消息:

第16款插件:spacegallery.js从远而近的缩放效果插件

图片幻灯插件 杨红伟 1411浏览 0评论

描述:从远而近的缩放效果插件
兼容浏览器:IE6/IE7/IE8/IE9/Firefox/Google chrome
官方链接:
http://www.eyecon.ro/spacegallery/
JS下载: http://www.ijquery.cn/js/spacegallery.js
预览: http://www.ijquery.cn/demo/spacegallery
打包下载: http://www.ijquery.cn/demo/spacegallery/spacegallery.zip
参数说明:

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

图片展示:

1111

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]

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址