素材网 素材网

jquery制作彩色光环旋转导航展示特效

下载资源()次

阅读次数()次

发布时间:2014-05-14

jquery制作彩色光环旋转导航展示特效
分享到:

用法简介:

来源:xw素材网

jquery制作彩色光环旋转导航展示特效。
文件引用:

<script>
var startCopy = new Object();
var newCopy = new Object();
function changeText(obj) {
	$('#loading').hide();
	$('#banner-copy').fadeOut(200, function () {
		$(this).children('h3').html(obj.headline);
		if (obj.h3class) { $(this).children('h3').addClass(obj.h3class); }
		else { $(this).children('h3').attr('class', ''); }
		if (obj.pclass) { $(this).children('p').addClass(obj.pclass); }
		else { $(this).children('p').attr('class', ''); }
		$(this).children('p').html(obj.copy);
		$(this).fadeIn(400);
	});
}
function getContent(name) {
	displayname = name.slice(0, name.length - 1);
	//create overlay with image and close button
	if (!$('#banner-img').length) {
		$('#banner-spin').append($('<div id="banner-img"><img src="" alt=""/><a href="#" id="banner-close">Close</a></div>'));
		$('#banner-close').unbind().click(function () {
			$(this).hide();
			clear();
			return false;
		});
	}
	$('#banner-img').removeClass('hidden');
	//get new text content before image load
	newCopy.headline = $('.' + name + ' h3').html();
	newCopy.copy = $('.' + name + ' p').html();
	if ($('.' + name + ' h3').attr('class').length) {
		newCopy.h3class = $('.' + name + ' h3').attr('class');
	}
	if ($('.' + name + ' p').attr('class').length) {
		newCopy.pclass = $('.' + name + ' p').attr('class');
	}
	//get banner image source from hidden content and load into banner-img div	
	if ($('#banner-img img').attr('src') != $('.' + name + ' a').attr('href')) {
		$('#banner-img img').attr({
			src: $('.' + name + ' a').attr('href'),
			alt: displayname,
		});
		$('#banner-img img').load(function () {
			$('#banner-img img, #banner-close').fadeIn(400);
			changeText(newCopy);
		});
	}
	else {
		$('#banner-img img, #banner-close').fadeIn(400);
		changeText(newCopy);
	}
}
//  关闭
function clear() {
	$('.active').addClass('closing').removeClass('active');
	$('#banner-img img').fadeOut(400, function () {
		$('#banner-img').addClass('hidden');
		$('#banner-spin a').removeClass('closing');
	});
	newCopy.h3class = '';
	newCopy.pclass = '';
	changeText(startCopy);
}
$(document).ready(function () {
	$('#banner-spin').append($('<div id="banner-wheel"></div><div id="loading"></div><div id="cover"></div>'));
	$('#banner-spin').animate({ opacity: 0 }, 0).css('visibility', 'visible');
	setTimeout(function () { $('#banner-spin').animate({ opacity: 1 }, 400) }, 500);
	//to save first page copy for reset
	startCopy.headline = $('#banner-copy h3').html();
	startCopy.copy = $('#banner-copy p').html();
	$('#banner-spin a').click(function () {
		$(this).addClass('active');
		getContent($(this).parent('li').attr('id'));
		return false;
	});
});
</script>


   

相关标签:

网友评论:

评论

发表 剩余字数:20

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

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

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

邮箱订阅

什么是邮箱订阅?

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