zhaoheqing
/
ohplay_official


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
							<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>猫王邀你“野性”吃鸡</title>
    <meta name="description" itemprop="description" content="<!--{echo $we_shareDesc}-->" />
    <script type="text/javascript" src="<!--{echo $we_staticDir}-->js/jquery-3.2.1.min.js"></script>
    <!-- http://res.wx.qq.com/open/js/jweixin-1.0.0.js -->
    <!-- http://res.wx.qq.com/open/js/jweixin-1.2.0.js -->
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style>
      html
      {color:#000;background:#FFF}
      body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
      {margin:0;padding:0}
      table
      {border-collapse:collapse;border-spacing:0}
      fieldset,img
      {border:0}
      address,caption,cite,code,dfn,em,strong,th,var
      {font-style:normal;font-weight:normal}
      ol,ul{list-style:none}
      caption,th
      {text-align:left}
      h1,h2,h3,h4,h5,h6
      {font-size:100%;font-weight:normal}
      q:before,q:after
      {content:''}
      abbr,acronym
      {border:0;font-variant:normal}
      sup{vertical-align:text-top}
      sub
      {vertical-align:text-bottom}
      input,textarea,select
      {font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}
      legend
      {color:#000}#yui3-css-stamp.cssreset{display:none}
      img
      { width: 100%; display: block;}

      /* main css */
      body
      { width: 100%; height: 100%; position: relative; left:0; top: 0; background: #000; overflow: hidden;}
      #wrap
      { height: 100%; position: absolute; left: 50%; top:50%; overflow: hidden;}
      .content
      { width: 1000px; height: 640px; color: #000; position: absolute; left:50%; top:50%;}
      .pageWrap
      { width: 100%; height: 100%; position: absolute; overflow: hidden; left: 0; top:0; -webkit-transition:all 1s; transition:all 1s;  transform: translate3d(100%, 0, 0); -webkit-transform: translate3d(100%, 0, 0);}
      .pageWrap div
      {
      display: none;
      // text-align: center;
      }
      .pageWrap:nth-child(1)
      {
      // background: #42a8fe url(<!--{echo $we_staticDir}-->chji1.png) no-repeat center bottom;
      // background-size:cover; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0);
      }
      .pageWrap:nth-child(1) div
      { display: block;}
      .img11
      {
      width:100%;
      height:100%;
      position: absolute;
      margin: 0 auto;
      transform: translate3d(0, 0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      }
      #shareTip{
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
      }
      #img111{
      // margin: auto 0 auto 0;
      // top: 50%;
      position: absolute;
      text-align: center ;
      margin: auto;
      top: 0; left: 0; bottom: 0; right: 0;
      }
      .invisible {
        opacity:0;
        filter:alpha(opacity=0);
        position:absolute;
        left:-320px;
        top:-480px;
        z-index:0;
      }
      // .img11{ width:97px; position: absolute; left:2%;  top:10%; }
    </style>
    <script>
      function _htmlDecode(value){ 
        return $('<div/>').html(value).text(); 
      }
      var ww = window.innerWidth;
      var wh = window.innerHeight;
      function doLandscape(){
         ww = window.innerWidth;
         wh =  window.innerHeight;
         $('body').css({
           'width': ww + 'px',
           'height': wh + 'px'});
         $('#wrap').css({
            'width':wh + 'px',
            'height':ww + 'px',
            'transform':'translate3d(-50%,-50%,0) rotate(90deg)',
            '-webkit-transform':'translate3d(-50%,-50%,0) rotate(90deg)'
         });  
      }
      function doPortrait(){
         ww = window.innerWidth;
         wh =  window.innerHeight;
         $('body').css({
           'width': ww + 'px',
           'height': wh + 'px'});
         $('#wrap').css({
            'width':ww + 'px',
            'height':wh + 'px',
            'transform':'translate3d(-50%,-50%,0)',
            '-webkit-transform':'translate3d(-50%,-50%,0)'
         });  
      }
      // 微信横屏模式下，更改分享提示箭头
      function setupLandscape() {
        $('#arrow_left').css({'display': 'none'});
        $('#arrow_right').css({'display': 'inline'});
        $('#shareTip').css({'left': 'auto', 'right': '10px'});
        $('#img111').css({'height': '100%', 'width': 'auto'});
      }
      $(document).ready(function(){
        setTimeout(function() {
          $('#shareTip').css({
            'display': 'inline'
          });

          setTimeout(function(){
            /*
            $('#shareTip').css({
            'display': 'none'
            });
            */
            $('#shareTip').fadeOut(2000, function() {
              $('#shareTip').css({'display': 'none'});
              $('#shareTip').remove();
            });
          }, 3600);
        }, 2000);
          window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
            window.location.reload();
            if (window.orientation === 180 || window.orientation === 0) {
              // alert('竖屏状态！');
              // doLandscape();
            }else if (window.orientation === 90 || window.orientation === -90 ){
              // alert('横屏状态！');
              // doPortrait();
            }else{
              // alert('no');
            } 
          }, false);

          if ( "orientation" in window ) {
            if (window.orientation === 180 || window.orientation === 0) {
              doLandscape();
            }else{
              doPortrait();
              setupLandscape();
            }     
          }else{
            var width = document.documentElement.clientWidth;
            var height =  document.documentElement.clientHeight;
            if ( width < height ){
              doLandscape();
            }else{
              doPortrait();
            }   
          }
      });
     // alert('' + window.orientation);
    </script>
  </head>
  <body>
    <img src="" class="invisible" id="hideicon" />
    <script>
      var shareIconUrl = "<!--{echo $we_shareIconUrl}-->";
      shareIconUrl = _htmlDecode(shareIconUrl);
      var shareUrl = "<!--{echo $we_shareUrl}-->";
      shareUrl = _htmlDecode(shareUrl);
      var bgImageUrl = "<!--{echo $we_bgImageUrl}-->";
      bgImageUrl = _htmlDecode(bgImageUrl);
      // alert(shareIconUrl + '\n' + shareUrl + '\n' + bgImageUrl);  
      console.log('shareIconUrl: ' + shareIconUrl);
      console.log('shareUrl: ' + shareUrl);
      console.log('bgImageUrl: ' + bgImageUrl);
      $('#hideicon').attr('src', shareIconUrl);
      wx.config({
        debug: false,
        appId: "<!--{echo $we_appid}-->",
        timestamp: <!--{echo $we_timestamp}-->,
        nonceStr: "<!--{echo $we_nonceStr}-->",
        signature: "<!--{echo $we_signature}-->",
        jsApiList: [
          'checkJsApi',
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
          // 'onMenuShareQQ',
          // 'onMenuShareWeibo',
          // 'chooseImage',
          // 'uploadImage',
          // 'previewImage'
        ]
      });

      wx.ready(function () {
        /*
        wx.checkJsApi({  
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,  
          success: function(res) {  
            // 以键值对的形式返回，可用的api值true，不可用为false  
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}  
            // if(!res["checkResult"]["chooseImage"]) {  
            //    alert("当前客户端不支持上传图片");  
            // }  
          }  
        });  
        */
        var shareConfig = {
          title: '猫王邀你“野性”吃鸡',
          desc: '<!--{echo $we_shareDesc}-->',
          link: shareUrl,
          imgUrl: shareIconUrl,
        };
        wx.onMenuShareAppMessage(shareConfig);
        wx.onMenuShareTimeline(shareConfig);
        wx.error(function (res) {
          alert(res.errMsg);
        });
        // alert(JSON.stringify(shareConfig));
      });
    </script>
    <div id="wrap">
      <div class="pageWrap">
        <div id="shareTip" style="display: none; position:absolute; top: 10px; left: 10px; z-index: 1999;">
          <table>
            <tr>
              <td>
                <img id="arrow_left" src="<!--{echo $we_staticDir}-->bg_share_arrow.png"/>
              </td>
              <td>
                <p ontouchstart="return false;" style="font-size: 18px; height: auto;color: #F31918;background: url(<!--{echo $we_staticDir}-->shareTip.png) no-repeat center center;background-size: 100% 100%;padding: 12px 12px 12px 12px;">请长按保存图片分享到朋友圈</p>
              </td>
              <td>
                <img id="arrow_right" style="display: none;" src="<!--{echo $we_staticDir}-->bg_share_arrow_right.png"/>
              </td>
            <tr>
          </table>
         <!-- <img src="<!--{echo $we_staticDir}-->shareTip.png"/> -->
        </div>
        <div class="img11" style="z-index: 1; position: relative;"><img id="img111" src="" alt="share to wechat image"/></div>
      </div>
      <!--
      <div class="pageWrap">
      </div>
    -->
    </div>
    <script>
      $('#img111').attr('src', bgImageUrl);
    </script>

  </body>
</html>