jquery鼠標懸停文字滑動切換效果代碼



126 503 168



特效描述:鼠標懸停 文字滑動切換 文字切換效果,

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bigshot+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet' type='text/css'>

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lettering.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.hoverwords.js"></script>

3. HTML代碼

<div class="bg"><img src="images/bg.jpg" alt="background" /></div>
<ul id="sl_menu" class="sl_menu">
	<li>
		<a href="http://www.17sucai.com/">Home</a>/
	</li>
	<li>
		<a href="http://www.17sucai.com/">About</a>/
	</li>
	<li>
		<a href="http://www.17sucai.com/">Portfolio</a>/
	</li>
	<li>
		<a href="http://www.17sucai.com/">Contact</a>
	</li>
</ul>
<div class="sl_examples">
	<a href="http://www.17sucai.com/" id="example1" data-hover="Creativity">Illustrations</a>
	<a href="http://www.17sucai.com/" id="example2" data-hover="Sharpness">Photography</a>
	<a href="http://www.17sucai.com/" id="example3" data-hover="Inspiration">Writing</a>
	<a href="http://www.17sucai.com/" id="example4">Collections</a>
	<a href="http://www.17sucai.com/" id="example5" data-hover="Beauty">Design</a>
</div>
<script type="text/javascript">
$(window).load(function(){
	$('#sl_menu').find('li:not(:last) > a')
				 .hoverwords({ overlay:true })
				 .end()
				 .find('li:last > a')
				 .hoverwords({ overlay:true , dir:'rightleft' });
	$('#example1').hoverwords({ delay:50 });
	$('#example2').hoverwords();
	$('#example3').hoverwords();
	$('#example4').hoverwords({ overlay:true});
	$('#example5').hoverwords({ delay:60 });
});
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 全屏焦點圖 旋轉翻轉 旋轉 翻轉 全屏切換 寬屏全屏 寬屏 全屏 頁面全屏 頁面寬屏 圖片全屏 文字翻轉 文字旋轉 文字全屏 文字滑動 文字滑塊
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子