html5移动端禁止长按图片保存的实现

ID:16175 / 打印

在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片。那该如何实现呢?下面给出3种解决方案。

方案一:使用 pointer-events:none

 img{    pointer-events:none; } 

亲测有效,适用于微信客户端的手机页面,图片被打开的情况. 

方案二:全局属性

 *{    -webkit-touch-callout: none;   -webkit-user-select: none;   -moz-user-select: none;   -ms-user-select: none;   user-select: none; } 

-webkit-touch-callout主要用于禁止长按菜单。当然针对webkit内核的浏览器。

user-select属性是css3新增的属性,用于设置用户是否能够选中文本。

方案三:加一层遮罩层 
 

图片上边加一层div类似于遮罩层,这样图片就不会被点击,右击或长按也不会出现如图的图片另存为的选项了。  代码示例如下:

 <div class="imgbox">     <div class="imshar"></div>     <img src=""/> </div> <style>  .imgbox{     position: relative;     width: 80%;     margin: 0 auto;     margin-top: 20px; }  .imgbox .imshar{     position: absolute;     z-index: 100;     left: 0;     right: 0;     top: 0;     bottom: 0;     opacity: 0; } .imgbox img{     display: block;     width: 100%; } </style>
上一篇: 在HTML5 localStorage中存储对象的示例代码
下一篇: 使用PDF.js渲染canvas实现预览pdf的效果示例

作者:admin @ 24资源网   2024-11-01

本站所有软件、源码、文章均有网友提供,如有侵权联系308410122@qq.com

与本文相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。