弹出广告简洁的jquery特效

  BOSS需要一个首页弹出广告的特效，于是webhao在粽子节前夕，熬夜做出一个手机端广告弹出特效，点击tochch me小手，出现一个带有白色幕布和广告图片的背景，再次点击屏幕效果消失，首页恢复正常。

jQuery代码：

<script>
  $(function(){
    //可视窗口的宽度,高度
    var width=$(window).width();
    var height=$(window).height();
    //文档宽度，高度
    var dWidth=$(document).width();
    var dHeight=$(document).height();
    //幕布遮住所有内容
    $(".screen").css("height",dHeight);
    $(".screen").css("width",dWidth);
    
    //显示图片的宽高为整个屏幕
    $("#pic").css("height",height);
    $("#pic").css("width",width);
    
    //侧边栏按钮的宽度
    var block=$("#touchme").css("width");
    left=parseInt(width)-parseInt(block)-10;
    //使侧边栏按钮居于最右边
    $("#touchme").css("left",left);
    
    /*禁止滚动*/
    var a=function(e){
      e.preventDefault();
      e.stopPropagation();
    }
    //点击touchme,添加禁止滚动事件a
    $("#touchme").click(function(){
      document.addEventListener("touchmove",a,false);
      $(".container").css("display","block");
    })
    //点击白色背景，移除事件a
    $(".container").click(function(){
      if(document.removeEventListener){
        document.removeEventListener("touchmove",a,false);
      }else{
        document.detachEvent("touchmove",a);
      }
      $(".container").css("display","none");
    })
  })
</script>

CSS代码：

<style type="text/css">
  #touchme{
    background: url("img/hi.png") no-repeat;
    width:35px;
    height:35px;
    position:fixed;
    top:50%;
    left:0px;
    z-index:97;
  }
  /*弹窗效果*/
  .container{
    display:none;
  }
  .screen {
      background: #fff none repeat scroll 0 0;
      display: block;
      left: 0;
      opacity: 0.8;
      position: absolute;
      top: 0;
      width: 100%;
      height:100%;
      z-index: 98;
  }
  #pic {
    background: rgba(0, 0, 0, 0) url("img/indexshow.png") no-repeat scroll center center / 200px auto;
      display: block;
    height: 500px;
    /*margin: 45px 0 0 10px;*/
    position: fixed;
      z-index: 99;
  }
</style>

HTML代码：

<div class="container" >
      <div class="screen">
        <div id="pic"></div>
      </div>  
</div>
<div id="touchme"></div>

期间也遇到一些问题，比如我想获取滚动条到顶部的高度，于是在手机端使用jQuery的scrolltop会失效，这个由于时间问题也没有深究，具体解决方案未知，若开发手机使用移动端框架应该不会存在这个问题。还有，

background: rgba(0, 0, 0, 0) url("img/indexshow.png") no-repeat scroll center center / 200px auto;

center center指图片位于屏幕正中心， / 后面的200px auto指的是图片的宽、高，属于css的新属性。至于为什么要用auto代替高度呢？因为设置具体的高度，图片会变得异常模糊。所以我们在为背景图片设置宽高的时候，尽量只控制宽，让高度auto.