js遮罩层以及移动端的上拉框

标签：style   blog   http   color   io   os   ar   2014   div   

今天发一个之前写的移动端的项目，主要是讲一下遮罩层的应用，以及顺带提一下移动开发的一些事情。首先按钮点击弹出遮罩层这个大家很熟悉了，这里还是给大家提供一份代码，跟通用的没太大区别，主要讲一下方法：

$(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变大，因此这样的做法便能实现我们想要的效果。附上图片：

这里想提一下，该项目是之前在小公司做的外包项目，初步只实现了效果，而用户体验事实上却是很差，浏览器采取和客户端一样的效果明显有很大缺陷，反应较慢。当然，从某种程度上，调试也是可以提升一部分效果的。

js遮罩层以及移动端的上拉框

标签：style   blog   http   color   io   os   ar   2014   div   

原文地址：http://www.cnblogs.com/qianyongV/p/3972575.html