注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

简单的堆叠图片效果插件SIMPLE STACK EFFECTS

动画 fishcity 1242浏览

堆叠图片效果插件SIMPLE STACK EFFECTS

simple stack effects是一款把图片堆叠在一起形成多种不同样式的插件,simple stack effects可以轻松的创建多种不同的堆叠效果,动画效果极强,你可以用这些效果来装饰网站,让网站动起来。

注:插件采用了CSS3特有的属性,如3D转场,所以插件只能在现代浏览器中正常工作。

jquery实例:simple stack effects的使用方法

构建html代码,这里只使用了4张图片,代码如下

<figure class="stack stack-sidegrid">
	<img src="img/1.png" alt="img01"/>
	<img src="img/3.png" alt="img03"/>
	<img src="img/4.png" alt="img04"/>
	<img src="img/2.png" alt="img02"/>
</figure>

写入CSS

把有的图片都使用absolute定位,除了最后一个

.stack {
	margin: 20px auto;
	width: 400px;
	padding: 0;
	position: relative;
	max-width: 100%;
}

.stack img {
	max-width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.3s;
}

.stack img:last-child {
	position: relative;
}

设置其中一张图片的定位为 relative,使得父元素可以得到一个合适的高度

以下是一个效果的实例

/* Bouncy Grid */
.stack-bouncygrid.active img {
	transform: scale(0.48);
}

.stack-bouncygrid.active img:nth-child(4) {
	transform-origin: 0 0;
}

.stack-bouncygrid.active img:nth-child(3) {
	transform-origin: 100% 0;
}

.stack-bouncygrid.active img:nth-child(2) {
	transform-origin: 0 100%;
}

.stack-bouncygrid.active img:first-child {
	transform-origin: 100% 100%;
}

转载请注明:jQ酷 » 简单的堆叠图片效果插件SIMPLE STACK EFFECTS

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。