jquery悬浮微信分享置顶特效代价

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

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

以下是 jquery悬浮微信分享置顶特效代价的示例演示效果:

当前平台(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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery悬浮微信分享置顶特效</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#welcome').fadeTo(2000, 1).delay(2000).animate({
		opacity: 0,
		marginTop: '-=200'
	},
	1000,
	function() {
		$('#welcome').hide();
	});
	$(window).scroll(function() {
		if ($(window).scrollTop() > 50) {
			$('#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:3000px;">
<div>
<div class="top">
  <ul id="jump">
    <li style="display:none;height:50px;"><a id="top" href="#top"></a></li>
    <li style="height:50px"><a id="sina" rel="nofollow" href="#" target="_blank"></a></li>
    <li style="height:50px"><a id="weixin" href="javascript:void(0)" onmouseover="showEWM()" onmouseout="hideEWM()">
      <div id="EWM"><img src="images/weixin_code.jpg" /></div>
      </a></li>
    <li style="height:50px"><a id="ceping" href="#" target="_blank"></a></li>
    <li style="height:50px"><a id="reply" href="#" target="_blank"></a></li>
    <script>
	  	function showEWM()
			{
				document.getElementById("EWM").style.display = 'block';
				}
		function hideEWM()
			{
				document.getElementById("EWM").style.display = 'none';
				}
	  </script>
  </ul>
</div>
</div>
</body>
</html>

CSS代码(style.css):

body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img,input{border:0 none;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;line-height:1.2;}
a{color:#000;text-decoration:none}
a:hover{color:#F60 !important;text-decoration:none}
html{_background:url(about:blank);}
.clear{clear:both;font-size:0;overflow:hidden;}
.top{float:left;width:100%;position:relative;margin-top:8px}
/*�ұ߸���*/
#jump{position:fixed;top:200px;left:50%;margin-left:510px;width:40px;z-index:400;_position:absolute;_top:expression(documentElement.scrollTop + "px");}
#top,#share,#reply,#sina,#ceping,#weixin{display:block;width:40px;height:42px;cursor:pointer;}
#top{background:url(../images/top.png) repeat scroll 0% 0% transparent;}
#share{background:url(../images/share.png) repeat scroll 0% 0% transparent;}
#reply{background:url(../images/reply.png) repeat scroll 0% 0% transparent;}
#sina{background:url(../images/sina.png) repeat scroll 0% 0% transparent;}
#weixin{background:url(../images/weixin.png) repeat scroll 0% 0% transparent;}
#top:hover{background:url(../images/toped.png) repeat scroll 0% 0% transparent;}
#share:hover{background:url(../images/shared.png) repeat scroll 0% 0% transparent;}
#reply:hover{background:url(../images/replyed.png) repeat scroll 0% 0% transparent;}
#sina:hover{background:url(../images/sinad.png) repeat scroll 0% 0% transparent;}
#weixin:hover{background:url(../images/weixind.png) repeat scroll 0% 0% transparent;}
#ceping{background:url(../images/ceping.png) repeat scroll 0% 0% transparent;}
#ceping:hover{background:url(../images/cepinged.png) repeat scroll 0% 0% transparent;}
.yjbys_sj{position:absolute;z-index:9999;top:150px;display:none;}
.yjbys_sj img{border:1px solid #DDDDDD;}
#EWM{position:absolute;left:40px;display:none;}
#EWM img{width:150px;height:150px;}
.red{color:red}

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