今天发一个之前写的移动端的项目,主要是讲一下遮罩层的应用,以及顺带提一下移动开发的一些事情。首先按钮点击弹出遮罩层这个大家很熟悉了,这里还是给大家提供一份代码,跟通用的没太大区别,主要讲一下方法:
$(function(){
var jiage=$(".jiage"),xingji=$(".xingji"),fj=$(".fj li"),qd=$(".qd");
jiage.click(function(){
tanchu();
xingji.slideDown(260);
});
function tanchu(){
var w=document.createElement("div");
w.setAttribute("id", "mybody"); //创建透明背景层(mybody)
with (w.style) {
width=‘100%‘;
height=‘100%‘
position = ‘absolute‘;
zIndex = ‘10‘;
left = ‘0‘;
top = ‘0‘;
background = ‘#000000‘;
filter = ‘Alpha(opacity=50)‘;
opacity = ‘0.3‘;
}
document.body.appendChild(w);
}
fj.click(function(){
fj.css("background","#fff").css("box-shadow","0").css("color","#000");
$(this).css("background","#F4F4F4").css("box-shadow","0px 1px 0px #999 inset").css("color","#31A1A4");
});
//点击之后清楚遮罩层
qd.click(function(){
xingji.slideUp(300);
var m=$("#mybody");
m.remove();
});
});
遮罩层的代码没什么好说,jq的基本dom操作,当然,有需要的可以自取,也很容易看懂。另外值得一提的是遮罩层的弹窗都要注意销毁,而这里因为正好页面处有确定选项,所以通过点击确定之后清楚遮罩层。当然这里提一个在移动端如何做上拉框的做法。我用的是将上拉框先用绝对定位fixed,然后点击的时候下拉,因为本身jq的slideUp采取的就是将div由0变大,因此这样的做法便能实现我们想要的效果。附上图片:
这里想提一下,该项目是之前在小公司做的外包项目,初步只实现了效果,而用户体验事实上却是很差,浏览器采取和客户端一样的效果明显有很大缺陷,反应较慢。当然,从某种程度上,调试也是可以提升一部分效果的。