<!--分享遮罩-->
<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>
###分享遮罩 #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调用方法
分享
事件触发方法:onClick="_system._guide(true)"
###备注 httpserver.js是基于node的web服务器文件,仅供本地测试html页面效果使用,安装谷歌二维码插件,可以扫描二维码在手机上查看页面在移动端效果。 注:有人说谷歌浏览器可以模拟手机端页面测试啊? 不过我最近发现谷歌浏览器的模拟页面效果与手机上存在细节差异,建议也要自己在手机上测试一下。