怎样添加手机wap网站下拉微博、微信分享代码

1、首先获取百度分享代码，选取下图样式

2、代码head里引用jq

<script language="javascript" type="text/javascript" src="jquery-1.7.2.min.js"></script>

3、定义头部css

body{-webkit-text-size-adjust:none;font-family:"microsoft yahei",Verdana,Arial,Helvetica,sans-serif;font-size:1em;min-width:320px;background:#eee;}

*{margin:0;padding:0;}

table {border-collapse:collapse;border-spacing:0}

ul,ol,li{list-style:none}

h1.logo {position:absolute;width:136px;height:55px;overflow:hidden;}

h1.logo a{display:block;height:100%; color:#FFFFFF; text-decoration:none;}

h1.logo a:hover{color:#FFFFFF;}

#top{height:55px;line-height:55px;font-size:14px;overflow:hidden;background:#339966;}

#top .header-title{width:120px; float:left;color:#fff;overflow:hidden;text-align:center;font-size:16px;white-space:nowrap;text-overflow:ellipsis;}

#top .site-nav{position:absolute;right:5px;top:10px;height:36px;}

#top .site-nav ul li{float:left;width:36px;height:36px;margin-left:5px;overflow:hidden;}

#top .site-nav ul li.allcate{background:url(images/share.png) no-repeat;background-size:100%;}

#top .site-nav ul li.home{background:url(images/home.png) no-repeat;background-size:100%;}

#top .site-nav ul li.home a,#top .site-nav ul li.allcate a.message{display:block;height:100%;text-indent:-9999em;}

4、添加html代码

<div id="top">

<h1 class="logo"><a href="/">手机网站</a></h1>

<div class="site-nav">

<ul class="fix">

<li class="home"><a href="/">首页</a></li>

<li class="allcate"><a href="javascript:;"class="message" id="activator_share">分享</a>

</li>

</ul>

</div>

</div>

显示效果如下

5、添加分享代码样式

.box{position:absolute;top:-400px;width:100%;color:#7F7F7F;margin:auto;padding:0px;z-index:9;text-align:center;}

.box_content_center{background-color:#969696;margin:0 8px 0 8px;color:#FFFFFF;

-moz-border-radius-bottomleft:8px;-webkit-border-bottom-left-radius:8px;-khtml-border-bottom-left-radius:8px;

-moz-border-radius-bottomright:8px;-webkit-border-bottom-right-radius:8px;-khtml-border-bottom-right-radius:8px;

}

.box_content_tab{background-color:#969696;margin:0 8px 0 8px;color:#FFFFFF; text-align:center;

-moz-border-radius-topleft:8px;-webkit-border-top-left-radius:8px;-khtml-border-top-left-radius:8px;

-moz-border-radius-topright:8px;-webkit-border-top-right-radius:8px;-khtml-border-top-right-radius:8px;

border-bottom:1px #595959 solid; padding:12px 0 12px 0; font-size:18px;

}

a.boxclose{cursor:pointer;color:#FFFFFF; width:67px; height:43px;background:url(../images/close_bt.png) no-repeat center; line-height:43px; font-size:14px; font-weight:bold; margin:20px 0px 20px 0; text-align:center;

display:block; float:right;text-shadow:1px 1px #085C8F;}

a.boxclose_right{background-color:#969696;cursor:pointer;color:#FFFFFF; width:57px; height:33px;-moz-border-radius-topleft:8px;-webkit-border-top-left-radius:8px;-khtml-border-top-left-radius:8px;

-moz-border-radius-topright:8px;-webkit-border-top-right-radius:8px;-khtml-border-top-right-radius:8px; -moz-border-radius-bottomleft:8px;-webkit-border-bottom-left-radius:8px;-khtml-border-bottom-left-radius:8px;

-moz-border-radius-bottomright:8px;-webkit-border-bottom-right-radius:8px;-khtml-border-bottom-right-radius:8px;line-height:33px; font-size:14px; font-weight:bold; margin:10px 25px 20px 0; text-align:center;

display:block; float:right;}

.form_content{padding:20px 15px 10px 15px; text-align:left;}

.form_content label{ font-size:16px; font-weight:bold;line-height:28px;}

input.form_input{width:100%;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px; background-color:#c8e2f1; height:30px; border:1px #08628F solid; color:#000000;}

input.form_input_box{width:100%;-moz-border-radius:8px;-webkit-border-radius:8px;-khtml-border-radius:8px; background-color:#6F6F6F; height:32px; border:1px #808080 solid; color:#fff;}

textarea.form_textarea{width:100%;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px; background-color:#c8e2f1; height:80px; border:1px #08628F solid; color:#000000;}

input.form_submit{cursor:pointer;color:#FFFFFF; width:67px; height:43px;background:url(images/left_bt.png) no-repeat center; border:none; line-height:43px; font-size:14px; font-weight:bold; margin:20px 15px 20px 0;display:block; float:right;text-shadow:1px 1px #085C8F; font-family:'Microsoft YaHei',Arial;}

input.form_submit_right{cursor:pointer;color:#FFFFFF; width:67px; height:43px;background:url(images/left_bt.png) no-repeat center; border:none; line-height:43px; font-size:14px; font-weight:bold; margin:20px 0px 20px 0;display:block; float:right;text-shadow:1px 1px #085C8F; font-family:'Microsoft YaHei',Arial;}

.box_content h3{font-size:22px; font-weight:normal; padding:15px 0 10px 0; margin:0px;color:#FFFFFF;text-shadow:1px 1px #085C8F;}

/*------------social icons------------------*/

.social_share{width:100%;text-align:center;padding:15px 0 0 0;}

.social_share ul{ padding:0px; margin:0px; list-style:none; display:inline-block;}

.social_share ul li{ padding:0px; margin:10px 8px 15px 8px;display:inline-block;}

6、添加分享html代码、百度分享代码和js代码

<div class="box" id="box_share">

        <div class="box_content">

            <div class="box_content_tab">

                分享

                </div>

                <div class="box_content_center">

                        <div class="social_share">

                        <ul>

百度分享代码

                        </ul>

                        </div>

                <a class="boxclose_right" id="boxclose_share">关闭</a>

                <div class="clear"></div>

                <script language="javascript">

$('#activator_share').click(function(){

$('#box_share').animate({'top':'55px'},500);

});

$('#boxclose_share').click(function(){

$('#box_share').animate({'top':'-400px'},500);

});

</script>

                </div>

           </div>

        </div>