#遮罩js 引导微信分享遮罩js

<!--分享遮罩-->
<script type="text/javascript">

    var _system={

        $:function(id){return document.getElementById(id);},

   _client:function(){

      return {w:document.documentElement.scrollWidth,h:document.documentElement.scrollHeight,bw:document.documentElement.clientWidth,bh:document.documentElement.clientHeight};

   },

   _scroll:function(){

      return {x:document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft,y:document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop};

   },

   _cover:function(show){

      if(show){

     this.$("cover").style.display="block";

     this.$("cover").style.width=(this._client().bw>this._client().w?this._client().bw:this._client().w)+"px";

     this.$("cover").style.height=(this._client().bh>this._client().h?this._client().bh:this._client().h)+"px";

  }else{

     this.$("cover").style.display="none";

  }

   },

   _guide:function(click){

      this._cover(true);

      this.$("guide").style.display="block";

      this.$("guide").style.top=(_system._scroll().y+5)+"px";

      window.onresize=function(){_system._cover(true);_system.$("guide").style.top=(_system._scroll().y+5)+"px";};

  if(click){_system.$("cover").onclick=function(){

         _system._cover();

         _system.$("guide").style.display="none";

 _system.$("cover").onclick=null;

 window.onresize=null;

  };}

   },

   _zero:function(n){

      return n<0?0:n;

   }

}

</script>

遮罩css

###分享遮罩 #cover{display:none;position:absolute;left:0;top:0;z-index:18888;background-color:#000000;opacity:0.7;} #guide{display:none;position:absolute;right:18px;top:5px;z-index:19999;} #guide img{width:260px;height:180px;}

遮罩html

###遮罩html部分

###遮罩html调用方法

分享

 事件触发方法：onClick="_system._guide(true)"

###备注 httpserver.js是基于node的web服务器文件，仅供本地测试html页面效果使用，安装谷歌二维码插件，可以扫描二维码在手机上查看页面在移动端效果。 注：有人说谷歌浏览器可以模拟手机端页面测试啊? 不过我最近发现谷歌浏览器的模拟页面效果与手机上存在细节差异，建议也要自己在手机上测试一下。