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.

技术
©2019-2020 Toolsou All rights reserved,
【jvm学习】执行引擎python(基本介绍)用户管理和文件权限C++第五章多态性习题:(快大结局了)VHDL——含异步清零和同步使能的加法计数器源程序Windows网络服务渗透测试实战-跨网段攻击JavaScript百炼成仙 1.15 天秀找出游戏的获胜者(java)单片机能做什么,你有什么有单片机或开源硬件做的有意思的作品吗一份笔记让你从 15K 涨薪并跳槽到32K+16