分享到微信朋友和微信朋友圈的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)系我們
友情鏈接: