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

jquery垂直自动高度响应式图片滚动特效

jQuery插件 fishcity 874浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天介绍这款主题是一款响应式垂直方向自适应高度的图片滚动效果,它可根据浏览器的高度或是项目的高度来100%填充,同时也可以设计垂直的图片个数来控制高度,是一款非常灵活的jquery插件。

构建html

<div id="carousel">
	<img src="img/i01.jpg" width="400" height="250" />
	<img src="img/i02.jpg" width="400" height="250" />
	<img src="img/i03.jpg" width="400" height="250" />
	<img src="img/i04.jpg" width="400" height="250" />
	<img src="img/i05.jpg" width="400" height="250" />
	<img src="img/i06.jpg" width="400" height="250" />
	<img src="img/i07.jpg" width="400" height="250" />
	<img src="img/i08.jpg" width="400" height="250" />
	<img src="img/i09.jpg" width="400" height="250" />
	<img src="img/i10.jpg" width="400" height="250" />
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	background-color: #f1e2f6;
	position: relative;
	min-height: 300px !important;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
body h3 {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 20px;
	text-align: center;
	color: #999;
	margin: 0;
	padding-top: 50px;
	position: relative;
	z-index: 2;
}
 
.caroufredsel_wrapper {
	margin: auto !important;
}
#carousel {
	height: 100%;
}
#carousel img {
	display: block;
	float: left;
	margin: 5px;
}

引入核心文件

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.1.0-packed.js" type="text/javascript"></script>

写入js调用插件,实现效果

$(function() {
	$('#carousel').carouFredSel({
		responsive: true,
		direction: 'down',
		height: '100%',
		items: {
			height: 150,
			width: '160%',
			visible: {
				min: 2,
				max: 8
			}
		},
		scroll: {
			items: '-1'
		}
	});
});

完成以上工作,便可以实现垂直的响应式图片滚动特效。

转载请注明:jQ酷 » jquery垂直自动高度响应式图片滚动特效

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