Jquery微信朋友圈分享代码

1.  

   1

    

   Html代码

    

    <div id="mcover" οnclick="weChat()" style="display:none;">

             <img src="images/guide.png" />

    </div>

    

   <div class="text" id="content">

                       <div id="mess_share">

                           <dsiv id="share_1">

                               <button class="button2" οnclick="button1()">

                                   <img src="images/icon_msg.png" width="64" height="64" />

                                    发送给朋友

                               </button>

                           </div>

                           <div id="share_2">

                               <button class="button2" οnclick="button2()">

                                   <img src="images/icon_timeline.png" width="64" height="64" />

                                    分享到朋友圈

                               </button>

                           </div>

                           <div class="clr"></div>

       </div>

    

   </div>

    

2.  

   2

    

   css代码

    

     #mcover {

       position: fixed;

       top: 0;

       left: 0;

       width: 100%;

       height: 100%;

       background: rgba(0, 0, 0, 0.7);

       display: none;

       z-index: 20000;

    }

    #mcover img {

       position: fixed;

       right: 18px;

       top: 5px;

       width: 260px!important;

       height: 180px!important;

       z-index: 20001;

    }

    .text {

       margin: 15px 0;

       font-size: 14px;

       word-wrap: break-word;

       color: #727272;

    }

    #mess_share {

       margin: 15px 0;

       display: block;

    }

    #share_1 {

       float: left;

       width: 49%;

       display: block;

    }

    #share_2 {

       float: right;

       width: 49%;

       display: block;

    }

    .clr {

       display: block;

       clear: both;

       height: 0;

       overflow: hidden;

    }

    .button2 {

       font-size: 16px;

       padding: 8px 0;

       border: 1px solid #adadab;

       color: #000000;

       background-color: #e8e8e8;

       background-image: linear-gradient(to top, #dbdbdb, #f4f4f4);

       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45), inset 0 1px 1px #efefef;

       text-shadow: 0.5px 0.5px 1px #fff;

       text-align: center;

       border-radius: 3px;

       width: 100%;

    }

    #mess_share img {

       width: 22px!important;

       height: 22px!important;

       vertical-align: top;

       border: 0;

    }

    

3.  

   3

    

   Jquery代码

    

   <script type="text/javascript">

   function button1(){

   $("#mcover").css("display","block")    // 分享给好友按钮触动函数

   }

   function button2(){

   $("#mcover").css("display","block")  // 分享给好友圈按钮触动函数

   }

   function weChat(){

   $("#mcover").css("display","none");  // 点击弹出层，弹出层消失

   }

   $(function(){

      setTimeout(function () {

           $("#mcover").show();}, 6000);   // 6000时毫秒是弹出层

    

   setTimeout(function () {

           $("#mcover").hide(); }, 8000);    //8000毫秒是隐藏层

   })

   </script>

4.  

   4

    

   最终效果图

    

   

   

5. 5

    

   注意事项

   • 注意：不要忘记引用Jquery，可以引用百度的Jquery地址

   • 有很多朋友说这个代码不能用，而且找不到图片，很对不起，所以把我全部的代码分享出去，演示地址：http://2.iyuyoung.sinaapp.com/share/share.html