通过代码在网页右侧显示悬浮的微信二维码。
样式代码：
@charset "utf-8";
html{_background:url(about:blank);}
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#000;text-decoration:none}
a:hover{color:#F60!important;text-decoration:none}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* jump */
#jump{position:fixed;top:300px;right:30px;width:40px;z-index:400;}
*html #jump{position:absolute;top:expression(documentElement.scrollTop + "px");margin:300px 0 0 0;}
#jump li{height:50px;overflow:hidden;}
#top,#share,#reply,#sina,#ceping,#weixin{display:block;width:40px;height:42px;overflow:hidden;cursor:pointer;}
#top{background:url(../images/top.png) no-repeat;}
#share{background:url(../images/share.png) no-repeat;}
#reply{background:url(../images/reply.png) no-repeat;}
#sina{background:url(../images/sina.png) no-repeat;}
#weixin{background:url(../images/weixin.png) no-repeat;}
#top:hover{background:url(../images/toped.png) no-repeat;}
#share:hover{background:url(../images/shared.png) no-repeat;}
#reply:hover{background:url(../images/replyed.png) no-repeat;}
#sina:hover{background:url(../images/sinad.png) no-repeat;}
#weixin:hover{background:url(../images/weixind.png) no-repeat;}
#ceping{background:url(../images/ceping.png) no-repeat;}
#ceping:hover{background:url(../images/cepinged.png) no-repeat;}
#EWM{position:absolute;left:-150px;display:none;}
#EWM img{width:150px;height:150px;}前端代码：
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#jump li:eq(0)').fadeIn(800);
} else {
$('#jump li:eq(0)').fadeOut(800);
}
});
$("#top").click(function() {
$('body,html').animate({
scrollTop: 0
},
1000);
return false;
});
});
</script>
</head>
<body style="height:2000px;">
<ul id="jump">
<li style="display:none;"><a id="top" href="#top"></a></li>
<li><a id="sina" href="http://weibo.com/jsfoot" target="_blank"></a></li>
<li>
<a id="weixin" href="javascript:void(0)" onmouseover="showEWM()" onmouseout="hideEWM()">
<div id="EWM"><img src="images/weixin_code.jpg" /></div>
</a>
</li>
<li><a id="ceping" href="http://www.17sucai.com/" target="_blank"></a></li>
<li><a id="share" href="http://www.17sucai.com/" target="_blank"></a></li>
<li><a id="reply" href="http://www.17sucai.com/" target="_blank"></a></li>
</ul>
<script type="text/javascript">
function showEWM(){
document.getElementById("EWM").style.display = 'block';
}
function hideEWM(){
document.getElementById("EWM").style.display = 'none';
}
</script>
本站所用代码：
<style type="text/css">
@charset "utf-8";
html{_background:url(about:blank);}
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#000;text-decoration:none}
a:hover{color:#F60!important;text-decoration:none}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* jump */
#jump{position:fixed;top:300px;right:30px;width:40px;z-index:400;}
*html #jump{position:absolute;top:expression(documentElement.scrollTop + "px");margin:300px 0 0 0;}
#jump li{height:50px;overflow:hidden;}
#top,#share,#reply,#sina,#ceping,#weixin{display:block;width:40px;height:42px;overflow:hidden;cursor:pointer;}
#top{background:url(http://cpuck.com/cpu/img/top.png) no-repeat;}
#weixin{background:url(http://cpuck.com/cpu/img/weixin.png) no-repeat;}
#top:hover{background:url(http://cpuck.com/cpu/img/toped.png) no-repeat;}
#reply:hover{background:url(http://cpuck.com/cpu/img/replyed.png) no-repeat;}
#weixin:hover{background:url(http://cpuck.com/cpu/img/weixind.png) no-repeat;}
#ceping{background:url(http://cpuck.com/cpu/img/h.png) no-repeat;}
#ceping:hover{background:url(http://cpuck.com/cpu/img/home.png) no-repeat;}
#EWM{position:absolute;left:-150px;display:none;}
#EWM img{width:150px;height:150px;}
</style>
<ul id="jump">
<li style="display:none;"><a id="top" href="#top"></a></li>
<li>
<a id="weixin" href="https://mp.weixin.qq.com/s/twKV7WfydjroUnlRViH9HQ" onmouseover="showEWM()" onmouseout="hideEWM()" target="_blank">
<div id="EWM"><img src="http://cpuck.com/cpu/img/weixin_code.png" /></div>
</a>
</li>
<li><a id="ceping" href="http://cpuck.com/" ></a></li>
</ul>
<script type="text/javascript">
function showEWM(){
document.getElementById("EWM").style.display = 'block';
}
function hideEWM(){
document.getElementById("EWM").style.display = 'none';
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#jump li:eq(0)').fadeIn(800);
} else {
$('#jump li:eq(0)').fadeOut(800);
}
});
$("#top").click(function() {
$('body,html').animate({
scrollTop: 0
},
1000);
return false;
});
});
</script>