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

超强jQuery插件carouFredSel之曲线图片循环展示特效

jQuery插件 fishcity 1438浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用,今天jQ酷将不断的推出此插件的不同特主题效果。现在让我们来看下曲线图片循环的展示特效吧,因为官方文档较少,而小编的时间很紧张,所以代码方面不多解释。

构建html

<div id="wrapper">
    <div id="carousel">
	<img src="img/lady-bug.jpg" alt="lady-bug" width="250" height="200" />
	<img src="img/caterpillar.jpg" alt="caterpillar" width="250" height="200" />
	<img src="img/cactus.jpg" alt="cactus" width="250" height="200" />
	<img src="img/snail.jpg" alt="snail" width="250" height="200" />
	<img src="img/penguin.jpg" alt="penguin" width="250" height="200" />
	<img src="img/giraffe.jpg" alt="giraffe" width="250" height="200" />
	<img src="img/flower.jpg" alt="flower" width="250" height="200" />
    </div>
</div>

写入CSS

#wrapper {
	background-color: #fff;
	border: 1px solid #ddd;
	width: 900px;
	height: 250px;
	padding: 0 45px;
	margin: -125px 0 0 -495px;
	overflow: hidden;
	position: absolute;
	top: 30%;
	left: 50%;
	box-shadow: 0 0 10px #bbb;
}
#carousel img {
	padding: 25px;
	display: block;
	float: left;
}

引入核心库

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

jquery库必须先引入,因为插件是基于jquery的,要不无法实现效果。

调用插件

$(function() {
    var itemHeight = 250;
    var delay = 150;

    $('#carousel').carouFredSel({
	        items: 3,
		scroll: {
		duration: 1400, //持续时间
		timeoutDuration: 2500, 
		onBefore: function( data ) {
			data.items.old.each(function( i ) {
			$(this).delay(i*delay).animate({
			marginTop: itemHeight,
			marginBottom: -itemHeight
			}, 500);
		    });
		    data.items.visible.css({
			marginTop: -itemHeight,
			marginBottom: itemHeight
			});
		    data.items.visible.each(function( i ) {
				$(this).delay((3+i)*delay).animate({
				marginTop: 0,
				marginBottom: 0
				}, 500);
			});
		    }
		}
	    });
	});

完成以上工作,动感的图片曲线滚动效果就实现了,具体的参数请朋友们动手体验。

转载请注明:jQ酷 » 超强jQuery插件carouFredSel之曲线图片循环展示特效

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