jQuery底部鼠标悬停展示二维码特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery底部鼠标悬停展示二维码特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery底部鼠标悬停展示二维码特效</title>
<link rel="stylesheet" type="text/css" href="css/commonstyle.css">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<!--公共底部-->
<div class="footer">
	<div class="footerinner">
		<ul class="share">
			<li>
				<img class="weibo_icon" src="img/share1.png" alt="">
			</li>
			<li>
				<img class="qq_icon" src="img/share2.png" alt="">
			</li>
			<li>
				<img class="twitter_icon" src="img/share3.png" alt="">
			</li>
			<li>
				<img class="wechat_icon" src="img/share4.png" alt="">
			</li>
		</ul>
		<div class="code_wrap">
			<ul class="code">
				<li><img class="weibo" src="img/weibo1.png" alt=""></li>
				<li><img class="qq" src="img/qq1.png" alt=""></li>
				<li><img class="twitter" src="img/twitter1.png" alt=""></li>
				<li><img class="wechat" src="img/wechat1.png" alt=""></li>
			</ul>
		</div>
	</div>
</div>

<script>
/*底部二维码*/

$(".weibo_icon").hover(function(){
	$(".weibo").fadeIn(500);
	$(".qq,.twitter,.wechat").fadeOut(0);
	$(".code_wrap").css("z-index",200);
},function(){
	$(".weibo").fadeOut(0);
	$(".code_wrap").css("z-index",50);
});

$(".qq_icon").hover(function(){
	$(".qq").fadeIn(500);
	$(".weibo,.twitter,.wechat").fadeOut(0);
	$(".code_wrap").css("z-index",200);
},function(){
	$(".qq").fadeOut(0);
	$(".code_wrap").css("z-index",50);
});
$(".twitter_icon").hover(function(){
	$(".twitter").fadeIn(500);
	$(".weibo,.qq,.wechat").fadeOut(0);
	$(".code_wrap").css("z-index",200);
},function(){
	$(".twitter").fadeOut(0);
	$(".code_wrap").css("z-index",50);
});
$(".wechat_icon").hover(function(){
	$(".wechat").fadeIn(500);
	$(".weibo,.qq,.twitter").fadeOut(0);
	$(".code_wrap").css("z-index",200);
},function(){
	$(".wechat").fadeOut(0);
	$(".code_wrap").css("z-index",50);
});
$(".weibo,.twitter,.wechat").hover(function(){
	$(this).fadeIn(0);
	$(".code_wrap").css("z-index",200);
},function(){
	$(this).fadeOut(500);
	$(".code_wrap").css("z-index",50);
});
</script>
</body>
</html>

CSS代码(commonstyle.css):

*{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
input{border:none;outline:none;font-family:"微软雅黑";font-weight:100;}
img{outline:none;border:none;}
body{width:100%;min-width:1200px;font-family:"微软雅黑";}
/*公共底部样式*/
.footer{width:100%;background:#333;box-sizing:border-box;padding:50px 20px 60px 20px;margin-top:200px;}
.footerinner{height:100%;margin:0 auto;position:relative;}
.share{width:274px;margin:0 auto;overflow:hidden;}
.share li{float:left;height:50px;padding:5px 14px;}
.share li img{width:40px;height:40px;cursor:pointer;border-radius:20px;}
.code_wrap{position:absolute;left:50%;top:-235px;margin-left:-450px;width:900px;z-index:50;}
.code{width:100%;overflow:hidden;position:relative;}
.code li{float:left;width:200px;height:240px;}
.code li img{width:210px;height:240px;display:none;}
.code li img.weibo{position:absolute;left:244px;}
.code li img.qq{position:absolute;left:312px;}
.code li img.twitter{position:absolute;left:382px;}
.code li img.wechat{position:absolute;left:448px;}
.footerinfo{font-size:16px;text-align:center;color:#fff;opacity:0.8;filter:alpha(opacity=80);}
.footerinfoTop{margin:10px 0;}
.footerinfoTop p{line-height:22px;}
.footerinfoBottom{font-size:12px;}
.footerinfoBottom .min{font-size:12px;}

附件:下载该文件资源,减少时间成本(增值服务)