今天發(fā)一個(gè)之前寫的移動(dòng)端的項(xiàng)目，主要是講一下遮罩層的應(yīng)用，以及順帶提一下移動(dòng)開發(fā)的一些事情。首先按鈕點(diǎn)擊彈出遮罩層這個(gè)大家很熟悉了，這里還是給大家提供一份代碼，跟通用的沒太大區(qū)別，主要講一下方法：

$(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"); //創(chuàng)建透明背景層(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");

});

//點(diǎn)擊之后清楚遮罩層
qd.click(function(){
xingji.slideUp(300);
var m=$("#mybody");
m.remove();
});
});

遮罩層的代碼沒什么好說，jq的基本dom操作，當(dāng)然，有需要的可以自取，也很容易看懂。另外值得一提的是遮罩層的彈窗都要注意銷毀，而這里因?yàn)檎庙撁嫣幱写_定選項(xiàng)，所以通過點(diǎn)擊確定之后清楚遮罩層。當(dāng)然這里提一個(gè)在移動(dòng)端如何做上拉框的做法。我用的是將上拉框先用絕對(duì)定位fixed，然后點(diǎn)擊的時(shí)候下拉，因?yàn)楸旧韏q的slideUp采取的就是將div由0變大，因此這樣的做法便能實(shí)現(xiàn)我們想要的效果。附上圖片：

這里想提一下，該項(xiàng)目是之前在小公司做的外包項(xiàng)目，初步只實(shí)現(xiàn)了效果，而用戶體驗(yàn)事實(shí)上卻是很差，瀏覽器采取和客戶端一樣的效果明顯有很大缺陷，反應(yīng)較慢。當(dāng)然，從某種程度上，調(diào)試也是可以提升一部分效果的。

轉(zhuǎn)載于:https://www.cnblogs.com/qianyongV/p/3972575.html

總結(jié)

以上是生活随笔為你收集整理的js遮罩层以及移动端的上拉框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。