弹出广告简洁的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.