第一部分 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" />
  •                                  发送给朋友
  •                             </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
下载测试

 

 

 

 

 

 

稳定

产品可用性高于99.9%

贴心

全国7*24小时客服热线

专业

产品经理在线技术支持

快速

快速上线运营快

承诺

我们选择声誉

坚持

10年专注高端品质开发
  • 返回顶部