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

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

转载于:https://www.cnblogs.com/qianyongV/p/3972575.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/299153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

精简ABP的模块依赖

ABP的模块非常方便我们扩展自己的或使用ABP提供的模块功能,对于ABP自身提供的模块间的依赖关系想一探究竟,并且试着把不必要的模块拆掉,找到那部分核心模块。本次使用的是AspNetBoilerplate。源码下载从Github下载ABP源码后,进入s…

你这飞机会爆炸吗?航空公司含泪甩卖49元机票,却被超模君挖出秘密!

全世界只有3.14 % 的人关注了爆炸吧知识制作团队制作人 超模君编剧 恐恐恐插画 杨羊羊 友情出演 超模君 章小天……小天吐槽时刻……超模君之后还会采访谁呢小天有小道消息哦扫描这个二维码你将会有机会见识到超模君的科普沙雕网友们一起斗图↓↓↓↓…

linux nginx mysql php 5.5._搭建基于Linux6.3+Nginx1.2+PHP5+MySQL5.5的Web服务器全过程

之前的Web服务器都是通过yum搭建的,想要添加新模块或者更新某些软件都很不方便(牵一发而动全身啊!)。所以,现在准备将环境改为源码编译安装,这样便于调整,性能上也会比yum方式好很多。以下是我的安装步骤,我…

ASP 缩略图 (纠错版)

网上很多缩略的代码&#xff0c;不过很多都是错误的。 这个是纠正版&#xff0c;本人已修改。 Code<%Function PicReSize(picURL)FileName1Mid(picURL,13,22)Set Jpeg Server.CreateObject("Persits.Jpeg") 获取源图片路径Path Server.MapPath(picURL) 打开源图…

Blazor Server 应用程序中进行 HTTP 请求

翻译自 Waqas Anwar 2021年5月4日的文章 《Making HTTP Requests in Blazor Server Apps》 [1]Blazor Server 应用使用标准的 ASP.NET Core 应用程序&#xff0c;在服务端执行 .NET 代码。在 Blazor Server 应用程序中&#xff0c;我们可以像在 ASP.NET Core Web 应用程序中那样…

遍历属性动态展示列

为什么80%的码农都做不了架构师&#xff1f;>>> 前端根据后台返回json对象(Map)进行动态列展示。 javascript属性遍历和访问&#xff1a; //var obj {name:"h2do",age:0,sex:"男"}; function User(){this.name "h2do";this.age 0…

厉害了!这几位小学生竟然在艺术界掀起一阵风暴,简直是灵魂画手无疑.........

全世界只有3.14 % 的人关注了爆炸吧知识高能预警&#xff01;请查阅全文&#xff01;在孩子们的眼中&#xff0c;世间万物都被赋予了无限的想象力&#xff0c;而绘画是他们独特想法和思维的表达。一支小小的画笔&#xff0c;便能创造一个千奇百怪的世界。为鼓励孩子们拿起画笔&…

花开的声音 - 张靓颖

姓名&#xff1a;张靓颖 / Jane Zhang性别&#xff1a;女 地区&#xff1a;内地 职业&#xff1a;歌手 星座&#xff1a;天秤座 血型&#xff1a;O 身高&#xff1a;162cm张靓颖&#xff0c;中国女歌手&#xff0c;四川成都人。2005年参加湖南卫视…

基于事件驱动架构构建微服务第5部分:容器化(Web Api Core 和 SQL Server Linux)

原文链接&#xff1a;https://logcorner.com/building-microservices-through-event-driven-architecture-part5-dockerization-web-api-core-and-sql-server-linux/在本文中&#xff0c;我将谈谈web api和sql server linux数据库的容器化Web API将发布并上线&#xff0c;它需要…

爆笑!物理书上的照片能不能好好选选啊喂!

全世界只有3.14 % 的人关注了爆炸吧知识在物理书里&#xff0c;有各种物理大佬的照片。他们正襟危坐&#xff0c;他们不苟言笑&#xff0c;他们看起来就很“物理”。但是&#xff0c;知识君想说&#xff0c;谁不是个有血有肉的人啊&#xff1f;&#xff01;选照片的时候给我好好…

计算机网络体系结构概述

1.Internet结构 2.计算机网络的体系结构 1&#xff09;网路协议主要由以下三要素组成&#xff1a; 语法&#xff0c;即数据与控制信息的结构或格式&#xff1b; 语义&#xff0c;即需要发出何种控制信息&#xff0c;完成何种动作以及做出何种响应&#xff1b; 同步&#xff0c;…

.NET 6 全新指标 System.Diagnostics.Metrics 介绍

前言工友们, .NET 6 Preview 7 已经在8月10号发布了, 除了众多的功能更新和性能改进之外, 在 preview 7 版本中, 也新增了全新的指标API, System.Diagnostics.Metrics, 为了让应用能有更好的可观测性, 在之前的发布的.NET 5中, 也把 Activity 增强为 ActivitySource, 主要原因还…

42张动图带你走进神奇的物理世界,超震撼!

全世界只有3.14 % 的人关注了爆炸吧知识世界之大&#xff0c;无奇不有。生活中其实有许多神奇的物理化学现象。下面就一起来看看吧&#xff01;图片加载慢稍加等待即可哦~神 奇 的 物 理 反 应1.锤击被液氮冻上的康乃馨&#xff0c;求康乃馨的心理阴影面积。2.比重比空气还大的…

Linux优化之IO子系统监控与调优

Linux优化之IO子系统作为服务器主机来讲&#xff0c;最大的两个IO类型 &#xff1a;1.磁盘IO 2.网络IO这是我们调整最多的两个部分所在磁盘IO是如何实现的在内存调优中&#xff0c;一直在讲到为了加速性能&#xff0c;linux内核一般情况下都会尝试将磁盘上的慢速设备上的文件缓…

用3年时间破解学界200多年难题,年仅21岁的天才竟因谈了一场恋爱挂掉了.........

全世界只有3.14 % 的人关注了爆炸吧知识俗话说&#xff0c;英雄难过美人关&#xff0c;即便是智商超群的数学天才也毫不例外。破得了百年的世界难题&#xff0c;却解不开一个小小的爱情谜团......没错&#xff0c;这位为情所困的数学天才&#xff0c;便是今天的主人公——伽罗瓦…

投影变换与视口变换

一些说明&#xff1a; 0. 投影变换&#xff1a;描述如何指定视景体(viewing volume)的形状和方向。视口变换&#xff1a;解释如何控制三维模型坐标到屏幕坐标的变换。 1. 无论是透视投影还是平行投影&#xff08;正交投影&#xff09;&#xff0c;只有在视景体中的物体才可见。…

java 按钮设置图片_Java中如何设置带图片按钮的大小

在java部分需要用到图形界面编程的项目中&#xff0c;经常会使用图片设置对按钮进行美化&#xff0c;但是使用时会出现一个很麻烦的问题&#xff0c; 按照方法&#xff1a;JButton jb1 new JButton();jb1.setBounds(0, 0, 25, 20);ImageIcon ii new ImageIcon("images/x…

JAVA 异常库

为什么80%的码农都做不了架构师&#xff1f;>>> 1.java.lang.NumberFormatException: multiple points已解决 多线程方法中使用了共享变量SimpleDateFormat&#xff0c;报如下错误&#xff1a; java.lang.NumberFormatException: multiple points at sun.misc.Floa…

WPF ComboBox 使用 ResourceBinding 动态绑定资源键并支持语言切换

WPF ComboBox 使用 ResourceBinding 动态绑定资源键并支持语言切换独立观察员 2021 年 8 月 23 日我们平常在 WPF 中进行资源绑定操作&#xff0c;一般就是用 StaticResource 或者 DynamicResource 后面跟上资源的 key 这种形式&#xff0c;能满足大部分需求。但是有的时候&am…

你一直憋着的那个屁,放出来时真的有人知道吗?我先告诉你憋着不放的屁会到哪去……...

全世界只有3.14 % 的人关注了爆炸吧知识制作团队制作人 超模君编剧 恐恐恐插画 杨羊羊友情出演 超模君 想增加更多的奇怪知识&#xff1f;带你入学↓↓↓关注“爆炸吧知识”日增怪知识&#xff01;