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

基于jquery动感斜切的焦点图效果

jQuery插件 fishcity 600浏览

这是一款基于jquery的超强插件carouFredSel,它可以实现极多不同的动画特效,只需配置不同的参数便可实现,简单易用。今天介绍这款主题是一款非常棒的焦点图特效,两张图片一大一小,斜切角互补,一个向上一个向下同时动画切换,同时标题会从右向左渐显,形成非常强的冲击感。


构建html

<div id="wrapper">
	<div id="carousel-large">
		<img src="img/d1-l.png" width="795" height="300" border="0" />
		<img src="img/d2-l.png" width="795" height="300" border="0" />
		<img src="img/d3-l.png" width="795" height="300" border="0" />
		<img src="img/d4-l.png" width="795" height="300" border="0" />
		<img src="img/d5-l.png" width="795" height="300" border="0" />
		<img src="img/d6-l.png" width="795" height="300" border="0" />
	</div>
	<img class="slicer" src="img/slicer-title.png" width="198" height="400" border="0" />
	<div id="carousel-small">
		<img src="img/d1-s.png" width="500" height="220" border="0" />
		<img src="img/d2-s.png" width="500" height="220" border="0" />
		<img src="img/d3-s.png" width="500" height="220" border="0" />
		<img src="img/d4-s.png" width="500" height="220" border="0" />
		<img src="img/d5-s.png" width="500" height="220" border="0" />
		<img src="img/d6-s.png" width="500" height="220" border="0" />
	</div>
	<div id="carousel-title">
		<p>Black truck</p>
		<p>Dusty black truck</p>
		<p>White/yellow truck</p>
		<p>White/red truck</p>
		<p>Orange truck</p>
		<p>Green truck</p>
	</div>
	<div id="navi"></div>
	<img class="slicer" src="img/slicer.png" width="208" height="400" border="0" />
</div>

写入CSS样式

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	min-height: 500px;
	background-color: #fff;
}
body * {
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	color: #333;
	line-height: 22px;
}
 
#wrapper {
	width: 800px;
	height: 320px;
	margin: -160px 0 0 -400px;
	position: absolute;
	top: 50%;
	left: 50%;
	overflow: hidden;
}
 
#carousel-title {
	width: 350px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
}
#carousel-title p {
	font-family: arial, helvetica, sans-serif;
	font-size: 30px;
	font-weight: bold;
	color: #999;
	width: 325px;
	height: 75px;
	margin: 0;
	padding: 25px 0 0 25px;
	float: left;
}
#carousel-small,
#carousel-large {
	position: absolute;
}
#carousel-small {
	width: 300px;
	height: 220px;
	bottom: 0;
	left: 0;
}
#carousel-large {
	width: 600px;
	height: 300px;
	top: 0;
	right: 0;
}
#carousel-large img {
	display: block;
	margin-left: 10px;
	float: left;
}
#carousel-small img {
	display: block;
	margin-right: 10px;
	float: right;
}
#navi {
	position: absolute;
	bottom: 0;
	right: 0;
}
#navi a {
	border: 1px solid #999;
	background-color: #fff;
	display: block;
	width: 8px;
	height: 8px;
	margin: 0 0 0 4px;
	float: left;
}
#navi a:hover {
	background-color: #ccc;
}
#navi a.selected {
	background-color: #999;
}
#navi a span {
	display: none;
}
.slicer {
	position: absolute;
	top: 0;
	left: 155px;
}

引入核心文件

<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>

写入javascript调用插件

$(function() {
 
	var scrollDuration = 400;
	var scrollEasing = 'quadratic';
 
	//	small images carousel
	$('#carousel-small').carouFredSel({
		direction: 'up',
		width: 315,
		height: 220,
		items: {
			visible: 1,
			width: 315,
			height: 220
		},
		align: false,
		pagination: '#navi',
		scroll: {
			fx: 'directscroll',
			duration: scrollDuration,
			timeoutDuration: 1500,
			easing: scrollEasing,
			onBefore: function( data ) {
				data.items.old.animate({
					'margin-right': -100
				}, scrollDuration, scrollEasing);
 
				data.items.visible.css({
					'margin-right': 120
				}).animate({
					'margin-right': 10
				}, scrollDuration, scrollEasing);
 
 
				var index = $(this).triggerHandler( 'currentPosition' );
				if ( index == 0 ) {
					index = $(this).children().length;
				}
 
				//	trigger the titles carousel
				$('#carousel-title').trigger('slideTo', [ index, 'next' ]);
 
				//	trigger the large images carousel
				$('#carousel-large').trigger('slideTo', [ index, 'prev' ]);
			}
		}
	});
 
	//	large images carousel, controlled by the small images carousel
	$('#carousel-large').carouFredSel({
		direction: 'down',
		width: 615,
		height: 300,
		items: {
			visible: 1,
			width: 615,
			height: 300
		},
		align: false,
		auto: false,
		scroll: {
			fx: 'directscroll',
			duration: scrollDuration,
			easing: scrollEasing,
			onBefore: function( data ) {
				data.items.old.animate({
					'margin-left': -140
				}, scrollDuration, scrollEasing);
 
				data.items.visible.css({
					'margin-left': 160
				}).animate({
					'margin-left': 10
				}, scrollDuration, scrollEasing);
			}
		}
	});
 
	//	titles carousel, controlled by the small images carousel
	$('#carousel-title').carouFredSel({
		width: 350,
		height: 100,
		items: {
			visible: 1,
			width: 350,
			height: 100
		},
		align: false,
		auto: false,
		scroll: {
			fx: 'directscroll',
			duration: scrollDuration,
			easing: scrollEasing
		}
	});
 
	//	tweek the pagination to always scroll forward
	$('#navi a')
		.unbind( 'click' )
		.bind( 'click', function( event ) {
			event.preventDefault();
			$('#carousel-small').trigger( 'slideTo', [$(this).index(), true, 'next'] );
		}
	);
});

完成以上工作,可以打开浏览器测试下效果了

转载请注明:jQ酷 » 基于jquery动感斜切的焦点图效果

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