jQuery鼠标悬停图片遮罩动画显示特效代码下载


jQuery鼠标悬停图片遮罩动画显示特效代码下载
jQuery鼠标悬停图片遮罩动画显示特效代码下载以及鼠标悬停、图片遮罩、动画显示等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" media="all">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

3. HTML代码

<div class="examples_body">
	<ul class="bannerHolder">
		<li>
			<div class="banner">
				<a href="https://www.51qianduan.com/">51前端</a>
				<p class="companyInfo">图片信息一</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div>
		</li>
		<li>
			<div class="banner">
				<a href="https://www.51qianduan.com/">51前端</a>
				<p class="companyInfo">图片信息二</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div>
		</li>
		<li>
			<div class="banner">
				<a href="https://www.51qianduan.com/">51前端</a>
				<p class="companyInfo">图片信息三</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div>
		</li>
		<li>
			<div class="banner">
				<a href="https://www.51qianduan.com/">51前端</a>
				<p class="companyInfo">图片信息四</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div>
		</li>
		<li>
			<div class="banner">
				<a href="https://www.51qianduan.com/">51前端</a>
				<p class="companyInfo">图片信息五</p>
				<div class="cornerTL"></div>
				<div class="cornerTR"></div>
				<div class="cornerBL"></div>
				<div class="cornerBR"></div>
			</div>
		</li>
	</ul>
<!-- Examples body -->
</div>
<script type="text/javascript">
$(document).ready(function(){
	// 0.4代表遮罩的透明度
	$('.banner div').css('opacity',0.2);
	$('.banner').hover(function(){
		var el = $(this);
		// 先淡出阴影,后淡入文字
		el.find('div').stop().animate({width:200,height:200},'slow',function(){
			el.find('p').fadeIn('fast');
		});
	},function(){
		var el = $(this);
		// 隐藏文字
		el.find('p').stop(true,true).hide();
		// 去掉遮罩
		el.find('div').stop().animate({width:60,height:60},'fast');
	}).click(function(){
		// 点击图片时打开链接
		window.open($(this).find('a').attr('href'));
	});
});
</script>

相关推荐

发表评论

相关文章