jquery仿淘宝顶部可关闭的二维码js代码

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

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

以下是 jquery仿淘宝顶部可关闭的二维码js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<title>jquery仿淘宝顶部可关闭的二维码</title>
<style>
div, ul, li, dl, dt, dd, table, td, input {
font-size: 12px;
}
* {
margin: 0;
padding: 0;
}
div {
margin: 0 auto;
}
.mod_qr {
	display: inline;
    float:right;
    position: relative;
    margin-right: 20px;
    margin-top:20px;
}
.mod_qr .mod_qr_bd {
position: relative;
cursor: pointer;
display: block;
text-align: center;
width: 94px;
height: 112px;
color: #6c6c6c;
border: 1px solid #e8e8e8;
overflow: hidden;
text-decoration: none;
}
.mod_qr .mod_qr_bd span {
display: block;
height: 20px;
line-height: 20px;
overflow: hidden;
margin: 4px auto 0;
width: 78px;
color: #333!important;
cursor: pointer;
text-align: center;
}
.mod_qr .mod_qr_bd img {
display: block;
margin-left: 8px;
width: 80px;
height: 80px;
vertical-align: bottom;
}
.mod_qr .fixed_qr_close {
position: absolute;
top: 0;
left: -19px;
display: block;
width: 18px;
height: 18px;
border: 1px solid #e8e8e8;
}
.mod_qr .fixed_qr_close s {
width: 11px;
height: 11px;
margin-left: 4px;
margin-top: 4px;
}
.qricon {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
zoom: 1;
text-indent: -3000px;
_text-indent: 0;
_font-size: 0;
}
.s_s_close {
background: url(images/TB1FEpXGXXXXXa4XXXXyTkXLpXX-500-444.png);
background-position: -154px -364px;
}
*html .mod_qr {
	_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,100)||0)-40));
	_bottom:auto;
	_position:absolute;
}
</style>
</head>
<body>
<div class="mod_qr">
    <a href="###" class="mod_qr_bd">
    <span class="h">手机逛商城</span>
    <img src="images/weixin.jpg" alt="手机逛商城">
  </a><a href="javascript:void(0);" id="close" class="fixed_qr_close"><s class="qricon s_s_close"></s></a>
</div>
<script>
$(function(){
	$(".fixed_qr_close").click(function(){
		$(".mod_qr").hide();
	})
})
</script>
</body>
</html>

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