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

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

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

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

时间: 2024-10-05 18:08:27

js遮罩层以及移动端的上拉框的相关文章

JS遮罩层——如何使被遮罩后的链接可以点击

在遮罩层的使用过程中,发现了一个问题,如果有一个有<a></a>标签链接的HTML页面,如果使用JS遮罩层将此HTML页面遮罩,则此链接无法点击:如果要使此链接可以点击,则需要在<a></a>标签中添加style属性“position:relative;”,例如: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>DIV CS

JS遮罩层弹框效果

对于前端开发者来说,js是不可缺少的语言.现在我开始把我日常积累的一些js效果或者通过搜索自己总结的一些效果分享给大家,希望能够帮助大家一起进步,也希望大家能够多多支持! 1.今天我先分享一个遮罩层弹框效果: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

js 遮罩层 loading 效果

//调用方法 //关闭事件<button onclick='LayerHide()'>关闭</button>,在loadDiv(text)中,剔除出来 //调用LayerShow(text),text为参数,可以写入想要写入的提示语 //本方法在调用时会自动生成一个添加到body的div,并且会在调用隐藏遮罩层 LayerHide()时删除div //封装遮罩层div显示效果 //将其放在页面的div中加载 function loadDiv(text) { var div = &q

JS-移动端判断上拉和下滑

一.手指触屏,利用touchstart和touchend计算前后滑动距离,判断是上拉还是下滑. 二.js中距离:pageY.clientY.offsetY的区别: offsetY:相对于父节点的偏移距离. clientY:相对于浏览器,滚轮距离不算在内. pageY:相对于浏览器,滚轮滚动的距离算在内:本例中,用pageY,触屏时记录位置-startY,结束时记录-endY,两个相减以正负判断是上移还是下滑. 三.touchstart有touches属性,touchend有changedTouc

js遮罩层弹出框

昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了一定指出呀 <style> #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #fff;} #H-dialog .close{float:right;font-size: 30px;margi

JS遮罩层

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全屏div</title> <style> html,body { margin:0; height:100%; } #test { width:100%; height:100%; background-color:#000; position:absolute; top:0; le

vux-scroller实现移动端上拉加载功能

本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能: 纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态管理工具,vux是一款移动端的UI组件库: vux(官方文档:https://doc.vux.li/zh-CN/)是基于WeUi和vue(2.x)开发的移动端的UI组件库,主要服务于微信页面.基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在We

微信小程序 下拉刷新 上拉加载

1.下拉刷新  小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调. 1. 需要在 .json 文件中配置. 如果配置在app.json文件中,那么整个程序都可以下拉刷新.如果写在具体页面的.json文件中,那么就是对应的页面,可以下拉刷新. 具体页面的.json文件: 1 { 2 "enablePullDownRefresh": true 3 } app.json文件: 1 "window": { 2 "enablePullD

iscroll 下拉刷新,上拉加载

新手,直接贴代码了 <!DOCTYPE html><html class=""><head lang="en"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content=&