素材网 素材网

jQuery焦点图支持上下左右滑动隐藏切换特效

下载资源()次

阅读次数()次

发布时间:2014-03-26

jQuery焦点图支持上下左右滑动隐藏切换特效
分享到:

用法简介:

来源:xw素材网

jQuery焦点图支持上下左右滑动隐藏切换特效。
文件引用:

<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.2.0-packed.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
function animateThumbs( direction, $item, val, opacity ) {
	var ani = {
		opacity: opacity
	};
	ani[ getMarginProperty() ] = val;
	if ( direction == 'next' ) {
		var x1 = '.t1',
			x2 = '.t2, .t4',
			x3 = '.t3, .t5, .t7',
			x4 = '.t6, .t8',
			x5 = '.t9';
	} else {
		var x1 = '.t9',
			x2 = '.t6, .t8',
			x3 = '.t3, .t5, .t7',
			x4 = '.t2, .t4',
			x5 = '.t1';
	}
	$(x1, $item).delay( _duration * 0    ).animate( ani, _duration );
	$(x2, $item).delay( _duration * 0.25 ).animate( ani, _duration );
	$(x3, $item).delay( _duration * 0.5  ).animate( ani, _duration );
	$(x4, $item).delay( _duration * 0.75 ).animate( ani, _duration );
	$(x5, $item).delay( _duration * 1    ).animate( ani, _duration );
}
function getMarginProperty() {
	return ( _orientation == 'horizontal' ) ? 'marginLeft' : 'marginTop';
}
function getMargin( direction ) {
	var margin = ( $window[ ( _orientation == 'horizontal' ) ? 'width' : 'height' ]() / 2 ) + 210
	if ( direction == 'next' )
	{
		margin = -margin;
	}
	return margin;
}
var $window = $(window),
	$inner = $('#inner'),
	$carousel = $('#carousel');
var _orientation = 'horizontal',
	_duration = 600,
	_animating = false;
$inner.show();
$carousel.carouFredSel({
	width: '100%',
	height: '100%',
	direction: 'left',
	items: 1,
	auto: false,
	scroll: {
		fx: 'none',
		timeoutDuration: 3000,
		conditions: function( direction ) {
			_animating = true;
			if ( $carousel.hasClass( 'prepared' ) )
			{
				$carousel.removeClass( 'prepared' );
				return true;
			}
			$carousel.addClass( 'prepared' );
			animateThumbs( direction, $carousel.children().first(), getMargin( direction ), 0 );
			setTimeout(
				function() {
					$carousel.trigger( direction );
				}, _duration + 800
			);
			return false;
		},
		onBefore: function( data ) {
			var direction = data.scroll.direction;
			var css = {
				opacity: 0
			};
			css[ getMarginProperty() ] = -getMargin( direction );
			$('img', data.items.visible).css( css );
			animateThumbs( direction, data.items.visible, 0, 1 );
		},
		onAfter: function( data ) {
			data.items.old.children().css({
				'marginLeft': 0,
				'marginTop': 0
			});
			setTimeout(
				function() {
					_animating = false;
				}, _duration + 800
			);
		}
	}
});
$('#left, #right, #up, #down').click(function() {
	if ( _animating ) {
		return false;
	}
	var direction = this.id,
		scroll = ( direction == 'up' || direction == 'left' ) ? 'next' : 'prev',
		newOrientation = ( direction == 'up' || direction == 'down' ) ? 'vertical' : 'horizontal';
	if ( _orientation != newOrientation ) {
		_orientation = newOrientation;
		$inner.toggleClass( 'horizontal' ).toggleClass( 'vertical' );
		$carousel.trigger( 'configuration', [ 'direction', direction ] );
	}
	$carousel.trigger( scroll );
	return false;
});
});
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。