分享到微信朋友和微信朋友圈的JS代碼
第一部分 html代碼部分
<link rel="stylesheet" href="content.css" /><div id="mcover" onclick="document.getElementById('mcover').style.display='';" style="display:none;">                    <img src="SELF_PUBLIC/Img/guide.png" />                </div>   <div class="text" id="content">                    <div id="mess_share">                        <div id="share_1">                            <button class="button2" onclick="document.getElementById('mcover').style.display='block';">                                <img src="SELF_PUBLIC/Img/icon_msg.png" width="64" height="64" />                                 發(fā)送給朋友                            </button>                        </div>                        <div id="share_2">                            <button class="button2" onclick="document.getElementById('mcover').style.display='block';">                                <img src="SELF_PUBLIC/Img/icon_timeline.png" width="64" height="64" />                                 分享到朋友圈                            </button>                        </div>                        <div class="clr"></div>                    </div>                </div>
 
 第二部分: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;}/**********************audio***********************/.btn_music{    display:inline-block;    width:35px;    height:35px;    background:url('../../img/play.png') no-repeat center center;    background-size:100% auto;    position:absolute;    z-index:100;    left:15px;    top:20px;}.btn_music.on{    background-image:url('../../img/stop.png');}/******************************動畫*************************/#iframe_screen{    background:#fff;    position:absolute;    width:100%;    height:100%;    left:0;    top:0;    z-index:300000;    overflow:hidden;}
3、效果圖
 
 演示效果(手機打開):http://www.ezcx.net/wap/index.php?lang=cn&id=90&module=2
 下載測試
推薦文章
2025-01-18
2024-11-28
2024-11-09
2024-10-25
2024-06-25
2024-01-04
2023-11-06
2023-10-30
2023-10-13
2023-10-10
穩(wěn)定
產(chǎn)品高可用性高并發(fā)貼心
項目群及時溝通專業(yè)
產(chǎn)品經(jīng)理1v1支持快速
MVP模式小步快跑承諾
我們選擇聲譽堅持
10年專注高端品質(zhì)開發(fā)聯(lián)系我們
友情鏈接: