jquery鼠标悬停文字滑动切换效果代码



122 486 163



特效描述:鼠标悬停 文字滑动切换 文字切换效果,

代码结构

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

加群请备注:从官网了解到