ios h5 长按时出现黑色透明遮罩

使用CSS3的box-shadow实现双透明遮罩层对话框

box-shadow介绍在我之前的一篇文章<从天猫和支付宝身上学习opcity与rgba>中,介绍了实现双透明遮罩层效果的两种方法,分别是opacity和rgba.他们需要分别依赖于不同的html结构. 例如用opacity方法:点我查看DEMO. 我一度认为实现这种双遮罩层的效果必须需要借助background,事实上利用CSS3的box-shadow属性可以轻松模拟出这种效果.再次查看Demo. box-shadow: 0 0 0 20px rgba(0, 0 ,0 ,0.5); 五个参…

ios h5 app avalon tap点击事件失效及点击延迟300ms问题解决方法

1.ios h5 app avalon tap事件失效使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-tap被内容遮住不执行.用MUI的on tap事件可以执行但改动较大,于是改为ms-on-click.(但是click事件有300ms延迟,解决方法在标题2处),搜索到以下解决方法: 解决办法有 4 种可供选择:(来自:https://happycoder.net/solve-ios-safari-cl…

iOS H5容器的一些探究（二）：iOS 下的黑魔法 NSURLProtocol

来源:景铭巴巴链接:http://www.jianshu.com/p/03ddcfe5ebd7 iOS H5 容器的一些探究(一):UIWebView 和 WKWebView 的比较和选择一.前言 NSURLProtocol是iOS中URL Loading System的一部分.如果开发者自定义的一个NSURLProtocol并且注册到app中,那么在这个自定义的NSURLProtocol中我们可以拦截UIWebView,基于系统的NSURLConnection或者NSURLSession进…

JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法

本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下: 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8">…

iOS：定制自适应大小的透明吐司弹框

一.简单介绍创建一个吐司消息的黑色透明弹框,可以根据消息长短自适应大小. 可以手动创建手动显示手动关闭,也可以手动创建自动显示自动关闭. 简单好用. 二.代码使用 .h文件 // // LiveHUD.h // // Created by 夏远全 on 2019/4/10. // Copyright © 2019年 xiaoshuang. All rights reserved. // #import <UIKit/UIKit.h> NS_ASSUME_NONNULL_BEGIN stati…

首次开发H5长图页总结

首次开发H5长图页总结. 资源统一加载资源统一加载, 分开获取定义资源标识符在src/resources目录下定义各个资源模块. 在Asset.js中获取定义好的所有模块, 循环出具体的文件路径, 统一数组. 按照一定规则组件文件id, 方便页面中获取. 暴露方法, 挂载全局在全局app.init的时候, 进行资源的初始化, 并把初始化的资源对象挂载到Global对象上, 方面后续其他页面的资源获取.(Global用作全局属性管理).代码的执行顺序为: app.init() => ne…

iOS H5 容器的一些探究（一）：UIWebView 和 WKWebView 的比较和选择

来源:景铭巴巴链接:http://www.jianshu.com/p/84a6b1ac974a 一.Native开发中为什么需要H5容器 Native开发原生应用是手机操作系统厂商(目前主要是苹果的iOS和google的Android)对外界提供的标准化的开发模式,他们对于native开发提供了一套标准化实现和优化方案.但是他们存在一些硬伤,比如App的发版周期偏长.有时无法跟上产品的更新节奏:灵活性差,如果有较大的方案变更,需要发版才能解决:如果存在bug,在当前版本修复的难度比较大(iOS…

iOS H5容器的一些探究（一）：UIWebView和WKWebView的比较和选择

一.Native开发中为什么需要H5容器 Native开发原生应用是手机操作系统厂商(目前主要是苹果的iOS和google的Android)对外界提供的标准化的开发模式,他们对于native开发提供了一套标准化实现和优化方案.但是他们存在一些硬伤,比如App的发版周期偏长.有时无法跟上产品的更新节奏:灵活性差,如果有较大的方案变更,需要发版才能解决:如果存在bug,在当前版本修复的难度比较大(iOS的JSPatch方案和Android的Dex修复方案);需要根据不同的平台写不同的代码,iOS主要…

透明遮罩图层VS高斯模糊滤镜效果分析

前端流行布局中最常见的弹出图层有popup, 对话框, tooltip等, 他们都使用了新的图层,但是实现办法各不相同, 有的是通过半通明的黑白图层实现的, 有的是通过滤镜实现的, 我们来研究一下两者的区别和使用场景. 半透明遮罩层透明图层是实现很简单, 是在每一个像素上分配一个权重值, 0~1, 剩下的颜色计算自底层, 经过叠加计算得到新的像素 alpha叠加原理来自上次项目中的一个问题: 例如,如果我为两个单独的标题设置值为rgba(15,34,160,1)和rgba(15 34,1…

iOS 利用长按手势移动 Table View Cells

本文译自:Cookbook: Moving Table View Cells with a Long Press Gesture 目录: 你需要什么? 如何做? 如何将其利用至UICollectionView上? 何去何从? 本次的 cookbook-style 教程中介绍如何通过长按手势来移动 table view中的cell,这种操作方式就像苹果自家的天气 App 一样. 你可以直接把本文中的到吗添加到你的工程中,或者将其添加到我为你创建好的 starter project 中,也可以下载本…

ios&h5混合开发项目仿app页面跳转优化

前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段,我们的项目主要页面都是由网页做的,只有一些IM.支付.分享.推送.上传照片这些用的是原生功能,大家都知道ios原生app的体验一直是很好的,现在改成了混合开发,无疑中就有些舍弃了ios原生的用户体验,而这个作为一个向来以用户体验为先的开发人员来说,这个真的是难以忍受,所以开始了以优化用户体验的为目…

iOS UICollectionView 长按移动cell

ref:http://www.jianshu.com/p/31d07bf32d62 iOS 9之后: 示例如下效果前言: 看完你可以学到哪些呢? 就是文章标题那么多, 只有那么多. . 手残效果图没弄好. @property (nonatomic, strong) UICollectionView *xtCollectionView; @property (nonatomic, strong) UICollectionViewFlowLayout *flowLayout; @property…

iOS 自定义相机带拍摄区域边框及半透明遮罩层(含源码)

开始时准备封装成ViewController的相机,但是在不改我相机控件源码的情况下,使用者很难自定义UI.于是想到将相机核心功能封装到View里,暴露出功能方法给外面调用,调用者只需将LFCamera贴到自己的控制器里即可,相机的UI由使用者在自己的控制器里画. 一.使用方法在你的控制器中加上相机只需如下三行代码即可 - (void)viewDidLoad { [super viewDidLoad]; self.lfCamera = [[LFCamera alloc] initWithFra…

react-native IOS TextInput长按提示显示为中文（select | selectall -> 选择 | 全选）

根据手机系统语言(简体中文/英文),提示不同的长按效果长按提示效果图英文长按提示中文长按提示解决 1.手机系统语言为简体中文: 设置->通用->语言与地区 2.ios/项目/info.plist文件中,增加 sorcecode是这样的 <key>CFBundleLocalizations</key> <array> <string>en</string> <string>zh_CN</string> &…

IOS+H5页面自定义按钮无效

在IOS整合H5页面的时候,自定义的按钮失去效果,Android系统可以. 如图,确定和取消按钮在IOS系统无效. 解决办法是在两个按钮上加上一个style属性即可 <span class="upper-sp sureExit" style="cursor:pointer">确定</span> <span class="upper-sp upper-sp1 noExit" style="cursor:poi…

客户端相关知识学习（十二）之iOS H5交互Webview实现localStorage数据存储

前言最近有一个需求是和在app中前端本地存储相关的,所以恶补了一下相关知识 webView开启支持H5 LocalStorage存储有些时候我们发现写的本地存储没有起作用,那是因为默认WebView没有开启LocalStorage存储.需要开启 H5使用的Local Storage存的数据,原生要拿到数据有两种方案用WebView执行js方法来读取数据: 找到Local Storage存储路径,直接读取: 参考 iOS用原生代码读写Webview的Local Storage…

iOS H5页面打开APP技术总结

iOS端H5页面打开APP的方式目前主要有两种:URL Scheme和Universal Links.其中Universal Links是iOS9.0以后推出的一种新的方案,由于它需要在iOS9.0以后才使用,而且还要兼容微信和iOS的版本,所以在项目中会采用两种方式结合的方式. 一.URL Scheme scheme是iOS9之前比较主流的一种跳转方案了, 更多的是用在了两个APP相互跳转中.也可以在Safari中输入schema://跳转到App内部,在项目中如下位置可以配置配置好后安装A…

inobounce.js : 禁止IOS H5的滑动回弹

IOS的移动端/H5/webapp 页面如果滚动到底部或者在页面顶部再往上拉,都会出现一个回弹的效果. 想取消这个效果可以引入一个简单的库就行,不用再写繁琐的样式. github地址直接引入就行 <script src="inobounce.js"></script> 例子: 因为这个库是禁止了整个页面的滑动,所以如果页面中有其他元素需要滑动的,要给滑动元素设置一个height或max-height,还有overflow: auto; -webkit-over…

【土旦】vue 解决ios H5底部输入框获取焦点时弹出虚拟键盘挡住输入框以及监听键盘收起事件

问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图解决方法: html: <input type="text" v-model="msg" maxlength="500" ref="inputShow" @click="inputShow" /> js: setTimeout(()=>{ this.$r…

iOS UIWebview 长按图片，保存到本地相册

我们所要解决的问题如题目所示:ios中,长按Webview中的图片,将图片保存到本地相册.解决方案:对load的html网页,执行js注入,通过在webview中执行js代码,来响应点击事件,通过js代码来模拟长按事件.发现图片的位置,获得图片的url链接,通过此链接获得图片,将此图片保存到本地相册.js注入代码:static NSString* const kTouchJavaScriptString=@"document.ontouchstart=function(event){\x=eve…

[Unity3D][Vuforia][ios]使用vuforia的unity3d库在ios中摄像头只显示黑色，不显示摄像头，NO CAMERA的解决方案

注:我使用的是Vuforia 4.0SDK Unity3D5.0版本,跑的ios系统为8.1 我在Vuforia官方讨论贴子中看到这其实是新手都会遇到的问题贴子地址: https://developer.vuforia.com/forum/ios/no-camera-image-unity-ipad-air-2 将Vuforia样例包拷到Unity3D中后打开 project - Assets - Scenes中找样例打开 Hierarchy - ARCamera选中 Inspector -…

修正ios h5上传图时的图片方向问题

.ios上传会在exif中带一个 Orientation的属性,这个属性在windows中不会生效,在ios浏览器中会生效,造成图片在windows资源管理器中与ios浏览器中方向不一致为了用户体验,需要把图片矫正成正常的图片. 需要用到一个 exif 插件地址 https://github.com/exif-js/exif-js/ 代码 function check_file(files){ //校验收集表单数据 // var formdata = new FormData(); ]…

[IOS]自定义长触屏事件

写一个Demo来自定义一个长触屏事件,自定义长按手势. 实现步骤: 1.创建一个自定义手势类,命名为LongPressGestureRecognizer,在创建的时候继承UIGestureRecognizer LongPressGestuRecognizer.h: #import <UIKit/UIKit.h> @interface LongPressGestureRecognizer : UIGestureRecognizer @end LongPressGestuRecognizer.m:…

ios html5 长按复制文本

以前做的项目,主要是针对ios的,安卓上面也没有测试. 原理其实是系统自带的功能,那时候借鉴的其他网站,没有试验通过document.execCommand("Copy"),别的js方式. 现在手上也没有设备了,这边只是提供html实现的方式. 1.跟网上的博客介绍的一样的,要满足 a.要复制的内容独占一行,不要和其他内容在一行(通过相对定位的也不可以) b.设置-webkit-user-select:initial; 2.ios9下面就是有问题,找了相同项目发现他们都正常的,研究了半…

头像修改功能包含ios旋转图片但是旋转后没遮罩，正常图片可以显示遮罩宽高不规则图片没做控制遮罩框可以拖动

https://blog.csdn.net/wk767113154/article/details/77989544 参考资料 <template> <div id="profile" class="has-top">  <!-- <div class="section"…

iOS开发--画一条黑色的横线

在网上搜索了下大概有下面几种方法: 1.使用Quartz2D画出横线需要一个UIVIew把这两个Label装起来,你需要计算好他们的位置同时给黑线预留像素的位置.这样你在UIView里面- (void)drawRect:(CGRect)rect;用Quartz2D把这条黑线画出来.然后在相应的位置把Label加进去画线的方法如下: + (void)strokeLine:(const CGFloat*)strokeColor startPoint:(CGPoint)startPoint end…

ios - UILabel_长按复制

1.添加长按的手势 UILongPressGestureRecognizer *longGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(showMenuAction:)]; [self.lable setUserInteractionEnabled:YES]; [self.lable addGestureRecognizer:longGesture]; 2.实现方法 - (B…

html中设置透明遮罩层的兼容性代码

说明:下面遮罩层的height视实际情况自行修改,要求显示的div层的样式需加上position:relative,位于遮罩层层div的下面一行.<div id="ceng" style="position: absolute;left:0;top:0;width: 100%;height: 200%;z-index:10;background:black;display: none;filter:alpha(opacity=50);-moz-opacity:0.5;-…