js通用分享

最新推荐文章于 2021-12-13 10:44:41 发布

Aa董小礼

最新推荐文章于 2021-12-13 10:44:41 发布

阅读量1.7k

点赞数

分类专栏： javascript 小技巧文章标签：分享 js分享通用分享

本文链接：https://blog.csdn.net/a1076454380/article/details/102678099

版权

这是一个关于如何在网页中实现通用分享功能的JS代码示例。通过提供的CSS样式和HTML结构，可以方便地将分享功能集成到网页中，支持各种社交媒体平台。

摘要由CSDN通过智能技术生成

直接复制拿去用即可

index.html

<head>
	<title>一款通用的js分享插件</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="x-ua-compatible" content="ie=emulateie7" />
	<meta name="author" content="netease" />
	<meta name="version" content="1.0" />
	<meta name="description" content="" />
	<script type="text/javascript">
		(function(window, document) {
			document.uniqueID != document.uniqueID && !!location.hash && (location.hash = location.hash);
			window.focus();
		})(this, document);
	</script>
	<link href="style/css/pt_lib_macro.css" type="text/css" rel="stylesheet" />
	<style>
		html,
		body {
			height: auto;
			overflow: hidden;
			background: #EDEDEF;
		}
		
		.c-bd {
			width: 700px;
			margin: 115px auto;
			background: #fff;
			border: 1px solid #c0c0c0;
		}
		
		.c-bdc {
			padding: 90px 0 90px 70px;
		}
		
		.c-bdc .w-wb1 {
			margin: 35px 0 0;
		}
		
		.w-wb1 .wb10 {
			overflow: hidden;
			display: block;
			width: 38px;
			height: 35px;
			text-indent: -9999px;
			background: url(style/images/img/tieba24.png) -43px 0 no-repeat;
		}
		
		.w-wb1 .wb10:hover {
			background-position: 1px 0;
		}
		/* 微信分享弹层样式 */
		
		.towdimcodelayer {
			position: absolute;
			left: -50px;
			top: -215px;
			z-index: 10000;
			margin-top: 0;
			opacity: 0;
			filter: alpha(opacity=0);
		}
		
		.js-transition {
			transition: margin-top .15s ease, opacity .12s linear;
			-webkit-transition: margin-top .15s ease, opacity .12s linear;
			-moz-transition: margin-top .18s ease, opacity .15s linear;
			-ms-transition: margin-top .15s ease, opacity .12s linear;
			-o-transition: margin-top .15s ease, opacity .12s linear;
		}
		
		.towdimcodelayer .arrow {
			position: absolute;
			width: 0;
			height: 0;
			border-width: 8px;
			border-style: solid;
			_display: none;
		}
		
		.towdimcodelayer .js-arrow-up {
			left: 72px;
			top: -15px;
			border-color: transparent transparent #191919 transparent;
		}
		
		.towdimcodelayer .js-arrow-down {
			left: 72px;
			bottom: -15px;
			border-color: #191919 transparent transparent transparent;
		}
		
		.towdimcodelayer .layerbd {
			width: 100px;
			height: 150px;
			padding: 30px 30px 0 30px;
			background: #191919;
			box-shadow: 0 1px 3px #000;
			-webkit-box-shadow: 0 1px 3px #000;
			-moz-box-shadow: 0 1px 3px #000;
			-o-box-shadow: 0 1px 3px #000;
		}
		
		.towdimcodelayer .codebg {
			width: 75px;
			height: 75px;
			padding: 13px 12px 12px 13px;
			background: #fff;
		}
		
		.towdimcodelayer .codebg img {
			width: 75px;
			height: 75px;
		}
		
		.towdimcodelayer .codettl {
			height: 22px;
			line-height: 22px;
			margin-top: 5px;
			color: #888;
			font-size: 12px;
		}
		
		.js-show-up {
			margin-top: 15px;
			opacity: 1;
			filter: alpha(opacity=100);
		}
		
		.js-show-down {
			margin-top: -15px;
			opacity: 1;
			filter: alpha(opacity=100);
		}
	</style>
</head>

<body>

	<div class="c-bd">
		<div class="c-bdc">
			<div class="c-mn">
				<h2 class="f-fs4 f-fw0 f-tal">将该日志分享到：</h2>
				<ul class="w-wb1">
					<li class="f-pr">
						<a href="javascript:void(0)" class="wb11" onmouseover="onMouseoverXCode()" onmouseout="onMouseoutXCode()">分享到微信</a>
						<div class="towdimcodelayer js-transition" id="layerWxcode">
							<div class="arrow js-arrow-down"></div>
							<div class="layerbd">
								<div class="codebg"><img class="xtag" src="http://www.lofter.com/genBitmaxImage?url=http://www.baidu.com/?act=qbwzywxfx_20141226_01"></div>
								<div class="codettl">打开微信扫一扫</div>
							</div>
						</div>
					</li>
					<li>
						<a href="#" onclick="dolog('sina', function(){window.open('http://v.t.sina.com.cn/share/share.php?title=' + encodeURIComponent('董小礼分享') + '&pic=' + encodeURIComponent('http://www.baidu.com/images/logo.gif') + '&sourceUrl=http%3A%2F%2Fwww.lofter.com&appkey=895033136', '_parent', ['toolbar=0,status=0,resizable=1,width=630,height=500,left=',(screen.width-630)/2,',top=',(screen.height-500)/2].join(''));return false;});" class="wb1" title="分享到新浪微博">分享到新浪微博</a>
					</li>
					<li>
						<a href="#" onclick="dolog('baidutieba', function(){window.open('http://tieba.baidu.com/f/commit/share/openShareApi?title=' + encodeURIComponent('jqueryschool是国内最大的jquery原创分享社区') + '&url=' + encodeURIComponent('http://www.baidu.com/') + '&pic=' + encodeURIComponent('http://www.baidu.com/images/logo.gif'), '_parent', ['toolbar=0,status=0,resizable=1,width=600,height=520,left=',(screen.width-600)/2,',top=',(screen.height-520)/2].join(''));return false;});" class="wb10" title="分享到百度贴吧">分享到百度贴吧</a>
					</li>

					<li>
						<a href="#" onclick="dolog('douban', function(){window.open('http://shuo.douban.com/!service/share?href=' + encodeURIComponent('http://www.baidu.com/') + '&name=' + encodeURIComponent('董小礼分享') + '&image=' + encodeURIComponent('http://www.baidu.com/images/logo.gif'), '_parent', ['toolbar=0,status=0,resizable=1,width=640,height=340,left=',(screen.width-640)/2,',top=',(screen.height-340)/2].join(''));return false;});" class="wb3" title="分享到豆瓣">分享到豆瓣</a>
					</li>
					<li>
						<a href="#" onclick="dolog('qq', function(){window.open('http://v.t.qq.com/share/share.php?c=share&a=index&appkey=5bd32d6f1dff4725ba40338b233ff155&title=' + encodeURIComponent('董小礼分享') + '&pic=' + encodeURIComponent('http://www.baidu.com/images/logo.gif'), '_parent', ['toolbar=0,status=0,resizable=1,width=630,height=500,left=',(screen.width-630)/2,',top=',(screen.height-500)/2].join(''));return false;});" class="wb4" title="分享到腾讯微博">分享到腾讯微博</a>
					</li>
					<li>
						<a href="#" onclick="dolog('qzone', function(){window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + encodeURIComponent('董小礼分享') + '&url=' + encodeURIComponent('http://www.baidu.com/'), '_parent', ['toolbar=0,status=0,resizable=1,width=600,height=520,left=',(screen.width-600)/2,',top=',(screen.height-520)/2].join(''));return false;});" class="wb5" title="分享到QQ空间">分享到QQ空间</a>
					</li>
					<li>
						<a href="#" onclick="dolog('renren', function(){window.open('http://share.renren.com/share/buttonshare.do?link=' + encodeURIComponent('http://www.baidu.com/') + '&title=' + encodeURIComponent('董小礼分享'), '_parent', ['toolbar=0,status=0,resizable=1,width=630,height=500,left=',(screen.width-630)/2,',top=',(screen.height-500)/2].join(''));return false;});" class="wb6" title="分享到人人网">分享到人人网</a>
					</li>
					<li>
						<a href="#" onclick="dolog('kaixin', function(){window.open('http://www.kaixin001.com/repaste/share.php?rtitle=' + encodeURIComponent('董小礼分享'), '_parent', ['toolbar=0,status=0,resizable=1,width=670,height=360,left=',(screen.width-670)/2,',top=',(screen.height-360)/2].join(''));return false;});" class="wb7" title="分享到开心网">分享到开心网</a>
					</li>
					<li>
						<a href="#" onclick="dolog('facebook', function(){window.open('http://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent('http://www.baidu.com/') + '&t=' + encodeURIComponent('董小礼分享'), '_parent', ['toolbar=0,status=0,resizable=1,width=660,height=280,left=',(screen.width-660)/2,',top=',(screen.height-280)/2].join(''));return false;});" class="wb8" title="分享到Facebook">分享到Facebook</a>
					</li>
					<li>
						<a href="#" onclick="dolog('twitter', function(){window.open('http://twitter.com/intent/tweet?url=' + encodeURIComponent('http://www.baidu.com/') + '&text=' + encodeURIComponent('《mysql Java jsp\\/servlet Tomcat完美解决乱码问题详细教程》 今天被乱码问题搞了好久= = 心累 然后说一下解决方案 1.mysql的 1)windows http:\\/\\/www.2cto.com\\/dat...  （分享自www.jq-school.com）'), '_parent', ['toolbar=0,status=0,resizable=1,width=660,height=280,left=',(screen.width-660)/2,',top=',(screen.height-280)/2].join(''));return false;});" class="wb9" title="分享到Twitter">分享到Twitter</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<script>
		function dolog(_info, _callback) {
			var img = new Image();
			img.onload = img.onerror = _callback;
			img.src = 'http://www.jq-school.com/images/logo.gif';
		}

		var layerWxcode = document.getElementById('layerWxcode');

		function onMouseoverXCode() {
			layerWxcode.className = 'towdimcodelayer js-transition js-show-up';
		}

		function onMouseoutXCode() {
			layerWxcode.className = 'towdimcodelayer js-transition';
		}
	</script>
</body>

css

@charset “utf-8”;.widgetcommon [hidefocus]{outline:none;}.widgetcommon,.widgetcommon div,.widgetcommon dl,.widgetcommon dt,.widgetcommon dd,.widgetcommon ul,.widgetcommon ol,.widgetcommon li,.widgetcommon h1,.widgetcommon h2,.widgetcommon h3,.widgetcommon h4,.widgetcommon h5,.widgetcommon h6,.widgetcommon pre,.widgetcommon form,.widgetcommon fieldset,.widgetcommon input,.widgetcommon button,.widgetcommon textarea,.widgetcommon p,.widgetcommon blockquote,.widgetcommon th,.widgetcommon td{padding:0;margin:0;}.widgetcommon fieldset,.widgetcommon img,.widgetcommon iframe{border:0;}.widgetcommon table{border-collapse:collapse;border-spacing:0;}.widgetcommon li{list-style:none;}.widgetcommon h1,.widgetcommon h2,.widgetcommon h3,.widgetcommon h4,.widgetcommon h5,.widgetcommon h6{font-weight:bold;font-size:100%;}.widgetcommon caption,.widgetcommon th{font-weight:normal;font-style:normal;text-align:left;}.widgetcommon em,.widgetcommon strong{font-weight:bold;font-style:normal;}.widgetcommon small{font-size:100%;}.widgetcommon ,.widgetcommon textarea,.widgetcommon select,.widgetcommon input,.widgetcommon button{font-size:12px;color:#444;}.widgetcommon textarea{overflow:auto;resize:none;}.widgetcommon a,.widgetcommon button{cursor:pointer;}.widgetcommon a{text-decoration:none;color:#444;outline:none;}.widgetcommon .w-cc1{background:url(img/cc.png) -999px -999px no-repeat;_background:url(img/cc-8.png) -999px -999px no-repeat;}.widgetcommon .w-load2 .load{background:url(img/load.gif) no-repeat right center;}.widgetcommon .w-pctrl{background:url(img/icon2-8.png) no-repeat 999px 999px;}.widgetcommon .w-ii{background:url(img/icon24.png) no-repeat 999px 999px;_background:url(img/icon.png) no-repeat 999px 999px;}.widgetcommon,.widgetcommon textarea,.widgetcommon select,.widgetcommon input,.widgetcommon button{font-family:“Hiragino Sans GB”,“Microsoft YaHei”,“微软雅黑”,tahoma,arial,simsun,“宋体”;}
@charset “utf-8”;[hidefocus]{outline:none;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td{padding:0;margin:0;}fieldset,img,html,body,iframe{border:0;}table{border-collapse:collapse;border-spacing:0;}li{list-style:none;}h1,h2,h3,h4,h5,h6{font-weight:bold;font-size:100%;}caption,th{font-weight:normal;font-style:normal;text-align:left;}em,strong{font-weight:bold;font-style:normal;}small{font-size:100%;}body,textarea,select,input,button{font-size:12px;color:#444;}body{background-color:#fff;}textarea{overflow:auto;resize:none;}a,button{cursor:pointer;}a{text-decoration:none;color:#444;outline:none;}a:hover{text-decoration:none;color:#7594B3;}::-webkit-input-placeholder {color:#666;}input:-moz-placeholder {color:#666;}.p-body7 .g-hdfull,body,.g-bd9,.g-hdwrap,.p-body10 .g-hdfull,.g-hd{background:url(img/body.png) repeat-x;}.p-bd10{background:url(img/fullbody2.png) repeat;}.g-bd10{background:url(img/bdbg.png);}.g-active{background:#ebebed url(img/activebg.jpg) no-repeat center 0;}.g-sphd{background:url(img/hdfull.png);_background:url(img/body.png) repeat-x;}.m-logo a,.m-nav .nav2 .nx,.m-nav li,.m-tsch .ttl,.w-tbtn{background:url(img/hd24.png) no-repeat 999px 999px;_background:url(img/hd.png) no-repeat 999px 999px;}.w-img{background:url(img/img24.png) no-repeat 999px 999px;_background:url(img/img.png) no-repeat 999px 999px;}.m-mlist .isayt,.m-mlist .isayt3,.m-mlist .isaym,.m-mlist .isaym2,.m-mlist .isaym3,.m-mlist .isayb,.m-mlist .isayc,.m-activity .m-nav2{background:url(img/isay24.png) no-repeat 999px 999px;_background:url(img/isay.png) no-repeat 999px 999px;}.g-bd2,.g-bd2 .g-bdc,.g-bd3,.g-bd3 .g-bdc,.g-box4,.g-bd4,.g-bd4 .g-bdc,.g-bd5,.g-bd5 .g-bdc{background:url(img/bd24.png) no-repeat 999px 999px;_background:url(img/bd.png) no-repeat 999px 999px;}.icon24,.w-sel,.w-sel .selicn,.w-icn,.w-opt .opta,.w-more,.m-menu .icn,.m-menu .set,.m-ssch button,.m-ssch2 button,.w-close,.w-ii,.m-icnt .zoomi,.w-opt .opticrt,.w-more2 span,.w-tip,.w-tip .tipc,.w-close,.w-icancel,.w-iadd,.w-help,.m-filecnt .music .type,.m-filecnt .movie .type,.m-goodblog .new,.m-selmorebtn2 a{background:url(img/icon24.png?042) no-repeat 999px 999px;_background:url(img/icon.png?042) no-repeat 999px 999px;}.icon2-8,.w-close2,.w-close3,.m-talk .cor,.m-tmsg .ok,.m-tmsg .err,.w-ial,.w-iar,.w-ial2,.w-iar2,.m-layer .warmt,.w-iadd,.w-help .tipcor,.w-iuar,.w-ok,.w-link,.m-edtadd .srch .w-inputxt-1,.w-ok2,.m-layer .layerarr,.m-stab li a,.w-jia,.w-sel .selb1,.m-calendar .before,.m-calendar .next,.w-icn2,.w-ialw,.w-top,.w-zoom,.w-pctrl,.m-bphoto .close,.m-itag h2,.w-go,.w-fank,.w-tbu,.m-filecnt .selsel,.m-pushtag .order,.w-wb em,.w-wb b,.m-sphd li,.m-sphd .share a,.m-logbm .share a,.m-icnt .totalbg,.m-fsch button,.w-gz,.w-result,.w-detect-1,.w-detect-2,.w-detect-4,.w-detect-6,.w-arrowt,.m-upface2 .arrowbg,.w-account3 .warn,.w-detect1,.m-menu .txt .del,.w-who .degrade{background:url(img/icon2-9.png) no-repeat 999px 999px;}.w-icn3{background:url(img/icon5-24.png) no-repeat 999px 999px;_background:url(img/icon5-8.png) no-repeat 999px 999px;}.m-nav2,.m-nav2 a,.m-activity-1 .m-nav2 span{background:url(img/nav224.png) no-repeat 999px 999px;_background:url(img/nav2.png) no-repeat 999px 999px;}.m-menu .menut,.m-menu .menub,.m-speinfo .speinfob,.m-menu .menum,.m-menu li,.m-sdbox .sdboxt,.m-sdbox .sdboxb,.m-sdbox .sdboxm,.m-ssch ul,.m-ssch .typeb,.m-ssch .type a{background:url(img/menu24.png) no-repeat 999px 999px;_background:url(img/menu.png) no-repeat 999px 999px;}.m-slid .page,.m-slid .oprti,.m-slid .cover,.w-huoy em,.m-splist .zoom{background:url(img/slid24.png) no-repeat 999px 999px;_background:url(img/slid.png) no-repeat 999px 999px;}.w-inputxt,.w-droplist,.m-edtadd .srch,.w-btxtbtn .txt,.w-stxtbtn .txt{background:#fff url(img/shadow-in.png) no-repeat;}.w-droplist .chkitm,.w-bbtn,.w-tag li,.w-tag li em,.w-sbtn,.w-vsbtn,.m-edtab li,.m-calendar a,.w-schbtn,.w-sbtn2,.w-sbtn2-1,.w-vbbtn,.w-vbbtn2,.w-droplist-3 .chkitm i,.m-set2 .btn2,.m-set2 .btn3{background:url(img/btn24.png) no-repeat 999px 999px;_background:url(img/btn.png) no-repeat 999px 999px;}.w-cover{background:url(img/cover24.png) no-repeat 999px 999px;_background:url(img/cover.png) no-repeat 999px 999px;}.w-load,.m-pimg .list .progress{background:url(img/loading.gif) no-repeat;}.w-player{background:url(img/player.png) no-repeat 0 0;}.w-account .txt,.w-user .txt,.m-filecnt .sel{background:url(img/empty.png) repeat;}.w-detect-3,.w-detect-5{background:url(img/detect.gif) no-repeat;}.m-set .wbi em,.w-jing,.w-jing span,.w-liang,.w-liang span,.w-wb1 .wb1,.w-wb1 .wb2,.w-wb1 .wb3,.w-wb1 .wb4,.w-wb1 .wb5,.w-wb1 .wb6,.w-wb1 .wb7,.w-wb1 .wb8,.w-wb1 .wb9,.w-wb1 .wb11,.w-wb2 .wb1,.w-wb2 .wb2,.w-wb2 .wb3,.w-wb2 .wb4,.w-wb2 .wb5,.w-wb2 .wb6,.w-wb2 .wb7,.w-wb3 .wb1,.w-wb3 .wb2,.w-wb3 .wb3,.w-wb3 .wb4{background:url(img/weibo.png) no-repeat 999px 999px;_background:url(img/weibo-8.png) no-repeat 999px 999px;}.m-pimg .add .btn,.m-pimg .list .move,.m-pimg .list .close,.m-pimg .list .ok{background:url(img/pimg.png) no-repeat 999px 999px;}.w-droplist .itm,.w-sel .seli-sp{background:url(img/x.png) repeat-x 999px 9999px;}.m-goodblog li{background:url(img/shadow1.png) no-repeat center 0;}.p-body6,.p-body8,.g-bd9 .g-hd9,.m-logbm .share{background:url(img/fullbody.png);}.m-stwrap .logo,.w-account .inpt,.w-account .btn,.w-account .chkbox .c,.w-account .warn,.w-account .warnc,.m-test,.w-introbtn em,.w-home,.m-logbm .itm,.w-sbtn-4 {background:url(img/login24.png) no-repeat 999px 999px;_background:url(img/login.png) no-repeat 999px 999px;}.w-sbtn-4{background:url(img/login-24.png) no-repeat;_background-image:url(img/login01.png);}.m-loadm .loadm{background:url(img/loadm.gif) no-repeat;}.m-tmsg .load{background:url(img/loadtmsg.gif) no-repeat 0 center;}.w-load2 .load{background:url(img/load.gif?020) no-repeat right center;}.m-error .error,.m-error .goback a{background:url(img/404.png) no-repeat 999px 9999px;}.g-hd9 .shadow,.w-introbtn{background:url(img/shadow2.png) repeat-x;}.m-intro .i1 h1,.m-intro .i0{background:url(img/intro.png) no-repeat 999px 9999px;}.m-start p{background:url(img/start.png) no-repeat 9999px 9999px;}.m-glist{background:url(img/glist.png)}.m-xlist2{background:url(img/xlist2bg.png);}.m-layer2{background:url(img/layerbg.png) repeat;}.w-cc,.m-layer .cclist li{background:url(img/cc-icon24.png) -999px -999px no-repeat;_background:url(img/cc-icon.png) -999px -999px no-repeat;}.w-cc1{background:url(img/cc.png) -999px -999px no-repeat;_background:url(img/cc-8.png) -999px -999px no-repeat;}.w-account-1 .validt{background:url(img/valibg.gif) right center no-repeat;}.w-account2 .validt,.w-account3 .validt{background:url(img/valibg.png) right center no-repeat;}.m-othrid .icon,.c-slid .num a,.w-pctrl-pre1,.w-pctrl-nxt1,.w-account3 .icn,.w-droplist1 .chkitm,.w-img-2 .time,.m-menu .icn-17,.w-icn-8,.w-droplist-3-dis .chkitm i,.m-page .num .arrow,.w-arrowt2,.m-calendar .arrow,.m-tagsch .arrow,.m-txtsch .arrow{background:url(img/icn3.png) -999px -999px no-repeat;_background:url(img/icn3-8.png) -999px -999px no-repeat;}.m-layer3,.m-layer3 .layerc{background:url(img/layerbgm.png) repeat-y;}.m-layer3 .layerbgt,.m-layer3 .layerbgb{background:url(img/layerbgt.png) repeat-x;}.m-msgs-1,.m-speinfo .speinfot{background:url(img/msgbg.png) no-repeat;}.m-speinfo{background:url(img/speinfobg.png) repeat-y;}.w-account-2 .w0 .inpt{background:url(img/inputbg.png) no-repeat;_background:url(img/inputbg-8.png) no-repeat;}.m-joinlofter{background:url(img/joinbg.png) no-repeat;}.m-nav .more,.w-sel-4,.w-sel-5,.w-sel-6,.m-nav .nav2,.m-nav .btn,.m-nav .new,.m-nav .nav2 .name,.m-menu .large .dropicon,.m-menu .tip,.w-sel-6 .sd a,.w-sel-6 .sd .sdtip,.m-nav .nav1 .seli a,.m-nav .nav2 .sugbox,.m-ssch2 .sugitma,.m-nav .nav2 .sugbox,.w-vsbtn-3,.w-vsbtn-4,.w-sel-6 .selc .add .user,.w-sel-6 .selc .add,.m-menu .crtp,.w-schbtn2,.m-at .shadow,.w-sel-4 .newicn,.w-wmtips,.w-icnwm,.w-icnreward,.w-icnpaster{background:url(img/icon4-24.png) -9999px -9999px no-repeat;_background:url(img/icon4-8.png) no-repeat 999px 999px;}.w-type{background:url(img/icon6.png) no-repeat;_background:url(img/icon6-8.png) no-repeat;}.m-itag .itagbtn a,.m-post .cover,.m-tools .page a,.w-icn4,.w-icn5{background:url(img/icon7.png) no-repeat;_background-image:url(img/icon7-8.png);}.w-wb2 .xcont{background:url(img/xcode.png) no-repeat;}.m-postlist2 .icover{background:url(img/bg.gif) repeat;}.g-hd:after,.g-hd8:after,.g-hdfull:after,.g-bd:after,.g-bdfull:after,.g-bdc:after,.g-ft:after,.g-box4:after,.m-mlist:after,.w-opt:after,.m-icnt .icntpt:after,.m-menu .menum:after,.m-sdbox .sdboxm:after,.w-tag ul:after,.m-icnt .cnt:after,.m-icnt .more:after,.m-mlist .isayi:after,.m-cmt ul:after,.m-set .seti:after,.m-set .seti2:after,.m-xlist:after,.m-xlist .xlist:after,.m-pimg .list .itm:after,.m-edtab ul:after,.m-edtadd:after,.m-ctab:after,.w-chklist:after,.m-cmt .cmti:after,.m-filecnt .list:after,.m-calendar ul:after,.m-goodcnt ul:after,.m-goodcnt li:after,.m-goodblog ul:after,.m-goodtag ul:after,.w-account:after,.m-introlist:after,.m-upface2 .upfaceimg:after,.m-mtab:after,.m-filecnt1 .list:after,.m-layer .cclist li:after,.m-newblog-1 .about:after,.w-verify:after,.w-account2 .warn:after,.w-wb1:after,.m-ssch .sugitm:after,.m-layer3 .layerb:after,.m-timeset:after,.m-page-1:after,.m-speinfo .txt:after,.m-nav3:after,.m-templist ul:after,.m-actlist:after,.m-imglist:after,.m-certify:after,.m-certify .item:after,.m-glist2:after{display:block;visibility:hidden;clear:both;height:0;content:".";overflow:hidden;}.g-hd,.g-hdfull,.g-bd,.g-bdfull,.g-bdc,.g-ft,.g-box4,.m-mlist,.w-opt,.m-icnt .icntpt,.m-menu .menum,.m-sdbox .sdboxm,.w-tag ul,.m-icnt .cnt,.m-icnt .more,.m-mlist .isayi,.m-cmt ul,.m-set .seti,.m-set .seti2,.m-xlist,.m-xlist .xlist,.m-pimg .list .itm,.m-edtab ul,.m-edtadd,.m-ctab,.w-chklist,.m-cmt .cmti,.m-filecnt .list,.m-calendar ul,.m-goodcnt ul,.m-goodcnt li,.m-goodblog ul,.m-goodtag ul,.w-account,.m-introlist,.m-upface2 .upfaceimg,.m-mtab,.m-filecnt1 .list,.m-layer .cclist li,.m-newblog-1 .about,.w-verify,.w-account2 .warn,.w-wb1,.m-ssch .sugitm,.m-layer3 .layerb,.m-timeset,.m-page-1,.m-speinfo .txt,.m-nav3,.m-templist ul,.m-actlist,.m-imglist,.m-certify,.m-certify .item,.m-glist2{zoom:1;}body,textarea,select,input,button{font-family:“Hiragino Sans GB”,“Microsoft YaHei”,“微软雅黑”,tahoma,arial,simsun,“宋体”;}.m-nav .nav1,.m-icnt .icnttt,.w-fttl,.w-ett,.m-layer .warmt,.m-end h2,.m-layer .infoc h2,.m-itag h2,.m-loadm,.m-about h3,.w-load2{font-family:“Hiragino Sans GB”,“Microsoft YaHei”,“微软雅黑”,tahoma,arial,simhei,“黑体”;}.z-ff,.z-ff .f-ff0,.z-ff .f-ff1,.z-ff body,.z-ff textarea,.z-ff select,.z-ff input,.z-ff button,.z-ff .m-nav,.z-ff .m-icnt .icnttt,.z-ff .w-fttl,.z-ff .w-ett,.z-ff .m-layer .warmt,.z-ff .m-end h2,.z-ff .m-layer .infoc h2,.z-ff .m-itag h2,.z-ff .m-loadm,.z-ff .m-about h3,.z-ff .w-load2{font-family:tahoma,arial,simsun,“宋体”;}html,body{width:100%;height:100%;}html{overflow:hidden;overflow-y:scroll;}body{text-align:center;background-color:#ededef;}.p-body4{background-position:0 -82px;}.p-body4 .g-bd4{margin-top:112px;}.p-body5{background:#353b40;}.p-body5 .g-hd{width:562px;}.p-blog{background:#fff;}.p-body6{background-color:#383e43;}.p-body7,.p-body10{background:#fff;}.p-body7-fix .g-hdfull,.p-body10-fix .g-hdfull{position:fixed;_position:absolute;top:0;left:0;width:100%;padding:0;z-index:1000;_top:expression(document.getElementsByTagName(‘html’)[0].scrollTop+‘px’);}.p-body7-fix .g-bdfull{padding-top:82px;}.p-body8 .g-hd{width:562px;}.p-tmsg2{background-position:0 46px;}.p-body9{background-position:0 120px;}.p-body10 .g-hdfull,.p-body10 .g-hd{height:46px;overflow:hidden;}.p-body10 .g-bdfull{position:relative;padding:0 60px 0 30px;}.p-body10-fix .g-bdfull{padding-top:46px;}.g-hdc,.g-hd8,.g-bd,.g-bd2,.g-bd3,.g-bd4,.g-bd5,.g-bd6,.g-bd7,.g-bd8,.g-ft{width:928px;margin:0 auto;text-align:left;}.g-hd,.g-hd8,.g-hdwrap{height:82px;margin-bottom:30px;}.g-hd-auto{width:auto;margin-bottom:0;}.g-hdwrap .g-hd{margin-bottom:0;}.g-hd-tip{height:95px;margin:0 auto;background:#f2f2f2;}.g-ft{margin-top:25px;padding-bottom:20px;text-align:center;}.g-ft,.g-ft a,.g-ft a:hover{color:#74808b;}.g-ft1{position:absolute;z-index:8;bottom:0;width:100%;height:126px;}.g-ft1,.g-ft1 a,.g-ft1 a:hover{color:#5a5d5f;}.g-mn{float:left;width:674px;}.g-mn2{float:left;width:610px;}.g-sd{float:right;width:230px;padding:0 0 30px;}.g-box{padding:0 0 12px;}.g-box1{padding:0 30px;}.g-box2{padding:26px 30px 0;}.g-box3{padding:26px 30px 16px;border-bottom:1px solid #ebebeb;}.g-box4{padding:24px 30px 20px;border-bottom:1px solid #ebebeb;background-color:#fff;background-position:-3958px 0;background-repeat:repeat-y;}.g-box4s{float:left;width:86px;}.g-box4m{float:right;width:492px;}.g-box5{margin:0 30px 15px;padding:15px 18px 18px;border:1px solid #ebebeb;}.g-box6{padding:26px 0 0;}.g-box7{min-height:296px;_height:296px;padding:44px 50px 0;box-shadow:0 1px 3px 1px #333;-moz-box-shadow: 0 1px 3px 1px #333;}.g-box8{padding:40px 160px 110px;}.g-box9{padding:44px 50px;}.g-box10{padding:32px;border-bottom: 1px solid #ebebeb;}.g-box11{padding: 26px 30px 20px;border-bottom: 1px solid #EBEBEB;}.g-boxv2{margin:0 0 15px;background:#fff;box-shadow:0 1px 2px 0 rgba(0,0,0,.32);}#control_frame{position:fixed;_position:absolute;_float:right;}.g-bd{}.g-bdc{}.g-active{padding:30px 0 0;margin:-30px 0 0;}.g-bd2{width:926px;padding:0 0 2px;background-position:0 bottom;}.g-bd2 .g-bdc{background-position:-994px 0;background-repeat:repeat-y;}.g-bd2 .g-mn{width:670px;padding:0 1px;}.g-bd2 .g-sd{width:254px;padding-bottom:20px;}.g-bd2 .g-sd .g-box2{padding:26px 29px 0;}.g-bd3{width:928px;padding:0 0 2px;background-position:-2002px bottom;}.g-bd3 .g-bdc{background-position:-2996px 0;background-repeat:repeat-y;}.g-bd3 .g-mn{width:670px;padding:0 1px;}.g-bd3-1 .g-bdc{background:none;}.g-bd3-1 .g-mn{background:#fff;}.g-bd4{width:862px;padding:0 0 2px;background-position:-4900px bottom;}.g-bd4 .g-bdc{background-position:-5792px 0;background-repeat:repeat-y;}.g-bd4 .g-mn{width:860px;padding:0 1px;}.g-bd5{width:926px;padding:0 0 2px;background-position:0 bottom;}.g-bd5 .g-bdc{background-position:-6770px 0;background-repeat:repeat-y;border-top:1px solid #D4D4D5;}.g-bd5-1{margin-bottom:20px;}.g-bd5-1 .g-bdc{border-top-color:#e6e6e8;}.g-bd5 .g-mn{width:924px;padding:0 1px;}.g-bd5 .g-mn-1{width:866px;padding:20px 31px;}.g-bd5 .g-box4m{width:748px;}.g-bd6{width:562px;background:#fff;}.g-bd7{width:924px;}.g-hd8,.g-bd8{width:622px;}.g-bd9 .g-hd9{position:relative;zoom:1;width:100%;height:71px;padding:23px 0 0;z-index:10;background-position:0 0;_background-position:0 -36px;}.g-bd9{background-color:#ededef;background-position:0 -82px;}.g-hd9 .shadow{width:100%;height:21px;overflow:hidden;background-position:0 0;_background-position:0 -21px;}.g-hd9 form{height:71px;}.g-bd9 .g-bcnt{padding-top:30px;_padding-top:9px;}.g-bd9 .g-bcnt .l-cnt{min-height:814px;_height:814px;}.g-bd9 .g-bcnt-1{padding-top:0;}.g-bd9 .g-cnt{width:960px;margin:0 auto;border:1px solid #d4d4d5;text-align:left;background:#fff;}.g-bd10{width:700px;height:438px;margin:150px auto;text-align:left;}.g-bd10 .g-box8{padding:70px;}.g-hdfull,.g-bdfull{padding:0 30px;text-align:left;}.g-hdfull{height:82px;}.g-bdfull .g-sd{display:none;position:absolute;right:-280px;top:77px;width:255px;}.g-bdfull-show .g-bdc{margin:0 286px 0 0;}.g-bdfull-show .g-sd{right:30px;display:block;}.g-bdfull-show .m-showsd{right:316px;}.g-bdfull-show .m-showsd .w-arrowt2{right:296px;_right:0;background-position:-38px -700px;}.g-bdfull2{position:relative;zoom:1;height:100%;_height:100%;text-align:left;}.g-bdfull2 .g-ft1{text-align:center;}.g-sphd{position:relative;z-index:69;height:82px;opacity:0.8;}.g-sphd .g-hd{margin-bottom:0;}.g-spbd{padding:10px 22px 100px;overflow:hidden;zoom:1;border-top:1px solid #282828;text-align:left;background:#181818;}.g-spft{text-align:center;font-size:22px;font-weight:bold;}.g-spft a{display:block;width:100%;padding:18px 0 30px;background:#232323;color:#7D7D7D;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s;}.g-spft a:hover{background:#2e2e2e;color:#7D7D7D;}.m-test{width:424px;height:40px;padding-top:2px;margin:-30px 0 30px 100px;color:#b4b4b4;font-size:14px;line-height:32px;background-position:0 -355px;text-align:center;}.m-test a,.m-test a:hover{color:#b4b4b4;}.m-test .go{position:relative;display:inline-block;*display:inline;*zoom:1;padding-right:9px;}.m-test .go small{position:absolute;top:17px;right:-4px;width:0;height:0;overflow:hidden;margin-top:-4px;border-style:solid;border-width:4px;border-color:#6a6a6a #6a6a6a #6a6a6a #afafaf;}.m-stwrap{position:absolute;top:40%;left:50%;width:820px;height:280px;margin:-140px 0 0 -410px;z-index:10;}.m-stwrap .logo{width:424px;height:101px;margin:0 auto 75px;text-indent:-9999px;background-position:0 0;}.m-stwrap .sd{text-shadow:0 0 3px black;}.m-stwrap .m-othrid{float:left;}.m-stwrap .m-othrid .tit{margin:0 0 0 25px;}.m-intro{padding:100px 0 0;}.m-intro h1,.m-intro h2,.m-intro h3,.m-intro strong{font-weight:normal;}.m-intro p{line-height:22px;color:#666;}.m-intro .img img{display:block;}.m-intro .i0{height:25px;overflow:hidden;margin:50px 0;background-position:center -210px;}.m-intro .i1 h1{height:132px;margin:0 0 22px;overflow:hidden;text-indent:-2000px;background-position:center 0;}.m-intro .i1 .img img{margin:42px auto 0;}.m-intro .i2 h2{margin:0 0 90px;padding:0 0 0 40px;font-size:58px;color:#333;}.m-intro .i2 li{float:left;position:relative;width:100%;zoom:1;margin:60px 0 0;}.m-intro .i2 .first{margin:0;}.m-intro .i2 .txt{position:absolute;clear:both;top:30px;width:410px;}.m-intro .i2 .face,.m-intro .i2 .face img{display:block;width:50px;height:50px;}.m-intro .i2 .face{float:left;border:5px solid #ebebec;}.m-intro .i2 .info{float:right;width:340px;margin:-2px 0 0;}.m-intro .i2 .view{margin:10px 0 0;}.m-intro .i2 p strong{font-size:16px;color:#333;}.m-intro .i2 h3{margin:0 0 15px;padding:0 0 2px;border-bottom:1px solid #e7e7e7;font-size:32px;}.m-intro .i2 .odd .txt{left:40px;}.m-intro .i2 .odd .img{float:right;}.m-intro .i2 .even .txt{right:40px;}.m-intro .i2 .even .img{float:left;}.m-intro .i2 .spec4 .txt{width:348px;}.m-intro .i2 .spec4 .info{width:278px;}.m-intro .i3 h2{margin:0 0 80px;padding:0 0 0 40px;font-size:58px;color:#333;}.m-intro .i3 li{float:left;position:relative;width:100%;zoom:1;margin:70px 0 0;}.m-intro .i3 .first{margin:0;}.m-intro .i3 .txt{position:absolute;clear:both;top:30px;}.m-intro .i3 h3{margin:0 0 10px;font-size:22px;color:#333;}.m-intro .i3 .odd .txt{left:40px;}.m-intro .i3 .odd .img{float:right;}.m-intro .i3 .even .txt{right:40px;}.m-intro .i3 .even .img{float:left;}.m-intro .i3 .spec1 .txt{top:0;}.m-intro .i3 .spec3 .txt{top:70px;}.m-intro .i3 .w-icn{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;margin:0 3px;}.m-intro .i4 h2{margin:0 0 10px;font-size:50px;color:#333;}.m-intro .i4 .img{margin:35px 0 0;}.m-intro .i5 h2{margin:0 0 70px;padding:0 0 0 40px;font-size:50px;color:#333;}.m-intro .i5 h3{margin:0 0 10px;font-size:22px;color:#333;}.m-intro .i5 li{float:left;position:relative;width:100%;zoom:1;margin:80px 0 0;}.m-intro .i5 .first{margin:0;}.m-intro .i5 .txt{position:absolute;clear:both;top:0;}.m-intro .i5 .img{float:right;}.m-intro .i5 .odd .txt{left:40px;}.m-intro .i5 .spec2 .txt{position:static;margin:0 0 20px;padding:0 0 0 40px;}.m-intro .i6{padding:0 0 100px;}.m-intro .i6 h2,.m-intro .i6 p{position:relative;padding:0 0 0 40px;}.m-intro .i6 h2{margin:0 0 5px;font-size:50px;color:#333;}.m-intro .i6 .img img{margin:-28px auto 0}.m-logo,.m-logo a{position:relative;float:left;width:220px;height:44px;}.m-logo{margin:19px 0 0;}.m-logo a{overflow:hidden;text-indent:-2000px;background-position:0 0;}.m-logo a:active{top:1px;left:1px;zoom:1;}.m-logo .desc{position:absolute;left:195px;top:22px;width:300px;}.m-nav{float:right;margin:35px 0 0;}.m-nav ul{display:inline;float:left;}.m-nav li{position:relative;zoom:1;z-index:65;display:inline;float:left;height:47px;margin:0 0 0 30px;line-height:24px;}.m-nav .j-crt{min-width:18px;text-align:center;_width:expression(this.width > 18 ? true : 18);background-position:center -102px;}.m-nav .j-crt-1{background-position:center -222px;}.m-nav .j-crt-2{background-position:-116px -553px;}.m-nav .j-hover{z-index:69;}.m-nav .a-w-sel-3{text-align:left;}.m-nav a,.m-nav a:hover{color:#fff;}.m-nav .nav1{position:relative;z-index:65;width:440px;height:47px;padding:22px 5px 0 0;margin:-22px 0 0;text-align:right;}.m-nav .nav1 li{float:none;display:inline-block;*display:inline;*zoom:1;}.m-nav .nav1 a{white-space:nowrap;font-size:16px;color:#999;}.m-nav .nav1 a:hover{color:#fff;-webkit-mask:-webkit-gradient(linear,50% 30%,50% 200%,from(rgba(0,0,0,1)),to(rgba(0,0,0,1)));}.m-nav .nav1 .more{display:inline-block;width:15px;height:21px;background-position:6px 9px;}.m-nav .nav1 a:hover .more{background-position:-16px 9px;}.m-nav .j-crt a,.m-nav .j-crt a:hover{color:#fff;}.m-nav .nav2{float:right;position:relative;top:-1px;left:-2px;width:184px;height:26px;margin-left:26px;padding:2px 10px 2px 32px;background-position:0 -41px;z-index:65;}.m-nav .nav2 .ssch,.m-nav .nav2 form{background-color:#000;}.m-nav .nav2 .btn{display:block;position:absolute;top:6px;left:10px;width:18px;height:18px;background-position:0 -81px;}.m-nav .nav2 .btn:hover{background-position:-62px -81px;}.m-nav .nav2 .new{position:absolute;right:5px;top:5px;width:40px;height:18px;line-height:18px;color:#303539;text-align:center;background-position:-210px -81px;cursor:pointer;z-index:2px;}.m-nav .nav2 input{position:relative;width:144px;height:18px;padding:4px 45px 2px 0;*padding-top:2px;_padding:4px 40px 2px 0;margin:0;border:none;background-color:transparent;outline:none;line-height:18px;color:#fff;z-index:3;}.m-nav .nav2 form label{position:absolute;top:5px;left:32px;color:#666;cursor:text;z-index:1;}.m-nav .nav2 .selc{z-index:3px;}.m-nav .nav2 .tags a{display:block;position:relative;height:36px;padding:7px 50px 9px 17px;}.m-nav .nav2 .name{padding-left:22px;font-size:14px;line-height:18px;background-position:0px -111px;overflow:hidden;text-overflow:ellipsis;}.m-nav .tags a:hover .name,.m-nav .tags .seli-hover .name{background-position:-238px -111px;color:#fff;}.m-nav .nav2 .img{position:absolute;right:10px;top:10px;width:34px;height:34px;overflow:hidden;}.m-nav .nav2 .img img{display:block;width:34px;height:34px;border:0 none;}.m-nav .nav2 .count{padding:4px 0 0 22px;font-size:12px;line-height:14px;color:#888;}.m-nav .nav2 .nonew{position:relative;top:10px;}.m-nav .nav2 .w-sel .w-img2-2{margin:0;}.m-nav .nav2 .sugbox{width:226px;padding-top:8px;background-position:105px -16px;}.m-nav .nav1 .selcc .nx-1{background-position:16px -260px;}.m-nav .nav1 .selcc .nx-1:hover,.m-nav .nav1 .selcc .j-hover .nx-1{background-position:-215px -260px;}.m-nav .nav1 .selcc .nx-2{background-position:17px -299px;}.m-nav .nav1 .selcc .nx-2:hover,.m-nav .nav1 .selcc .j-hover .nx-2{background-position:-214px -299px;}.m-nav .nav1 .selcc .nx-3{background-position:18px -339px;}.m-nav .nav1 .selcc .nx-3:hover,.m-nav .nav1 .selcc .j-hover .nx-3{background-position:-213px -339px;}.m-nav .nav1 .selcc .nx-4{background-position:16px -381px;}.m-nav .nav1 .selcc .nx-4:hover,.m-nav .nav1 .selcc .j-hover .nx-4{background-position:-215px -381px;}.m-nav .nav1 .selcc .nx-5{background-position:16px -419px;}.m-nav .nav1 .selcc .nx-5:hover,.m-nav .nav1 .selcc .j-hover .nx-5{background-position:-215px -419px;}.m-nav .nav1 .selcc .nx-6{background-position:16px -712px;}.m-nav .nav1 .selcc .nx-6:hover,.m-nav .nav1 .selcc .j-hover .nx-6{background-position:-217px -712px;}.m-nav .nav1 .selcc .nx-7{background-position:16px -809px;}.m-nav .nav1 .selcc .nx-7:hover,.m-nav .nav1 .selcc .j-hover .nx-7{background-position:-217px -809px;}.m-nav .nav1 .selcc .nx-8{background-position:17px -1017px;}.m-nav .nav1 .selcc .nx-8:hover,.m-nav .nav1 .selcc .j-hover .nx-8{background-position:-214px -1017px;}.m-nav-1 .nav1{width:auto;}.m-nav-1 .j-crt{background-position:center -242px;}.m-nav-2 .nav1 a{font-size:16px;}.m-nav-2 .btn{margin-top:-3px;}.m-nav-2 .btn li{margin-left:30px;}.m-nav-2 .btn .first{margin-left:42px;}.m-nav2,.m-nav2 li,.m-nav2 a{height:110px;}.m-nav2{position:relative;z-index:9;margin:0 0 18px;padding:1px 2px 3px;background-position:0 0;}.m-nav2 li{float:left;width:140px;margin:0 0 -1px;}.m-nav2 a{display:block;width:100%;overflow:hidden;text-indent:-2000px;}.m-nav2 .user{position:relative;width:110px;}.m-nav2 .user a{text-indent:0;}.m-nav2 .user a:hover{background-position:-2px -133px;}.m-nav2 .user img{display:block;width:110px;height:110px;}.m-nav2 .user strong{visibility:hidden;}.m-nav2 .user2{position:absolute;bottom:0;right:0;width:30px;height:30px;border:2px solid #ededef;border-width:2px 0 0 2px;}.m-nav2 .user2 img{display:block;width:30px;height:30px;}.m-nav2 .n21:hover{background-position:-112px -133px;}.m-nav2 .n22:hover{background-position:-252px -133px;}.m-nav2 .n23:hover{background-position:-392px -133px;}.m-nav2 .n24:hover{background-position:-532px -133px;}.m-nav3 li{float:left;width:100px;height:36px;overflow:hidden;text-align:center;}.m-nav3 a{font-size:16px;color:#555;line-height:36px;}.m-nav3 a:hover,.m-nav3 .j-curr{color:#555;font-weight:bold;}.m-nav3 .j-curr{background:#ECECEE;}.m-nav3 .last{float:right;}.m-nav3 .last a{color:#666;}.m-nav3 .last span{vertical-align:-1px;}.m-nav3 .last a:hover{color:#7594B3;font-weight:normal;}.m-nav3-1{padding:30px 0 0;}.m-nav3-2{padding:30px 45px;border-bottom:1px solid #eee;}.m-nav3-2 li{width:auto;padding:0 35px;}.m-msgs{position:relative;z-index:5;margin:-21px 2px 20px 112px;font-size:12px;line-height:15px;*line-height:17px;color:#888;background-color:#fdf8c4;}.m-msgs .msgs{padding:10px 30px 8px;}.m-msgs .w-close2{position:absolute;top:12px;right:20px;}.m-msgs .w-icn-5{float:left;margin-top:1px;margin-right:7px;_margin-right:4px;}.m-msgs-1{height:84px;margin:0;line-height:26px;color:#444;}.m-msgs-1 .msgs{padding-top:18px;}.m-msgs-1 .msgs a{text-decoration:underline;}.m-msgs-1 .w-close3{position:absolute;top:14px;right:6px;}.m-mlist{margin:0 0 16px;}.m-mlist .mlistimg{float:left;}.m-mlist .mlistcnt{float:right;}.m-mlist .isay{width:585px;}.m-mlist .isayt{height:24px;overflow:hidden;background-position:0 0;}.m-mlist .isayt3{height:1px;overflow:hidden;background-position:-3257px 0;}.m-mlist .isaym,.m-mlist .isaym2,.m-mlist .isaym3{zoom:1;padd

最低0.47元/天解锁文章

Aa董小礼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js通用分享

直接复制拿去用即可index.html<head> <title>一款通用的js分享插件</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta http-equiv="x-ua-compatible" content="...
复制链接

扫一扫

专栏目录