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


方案一:使用 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 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>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
实现按拖动图片,可以通过以下步骤: 1. 给图片绑定 touchstart、touchmove、touchend 事件。 2. 在 touchstart 事件,记录当前手指位置和图片位置。 3. 在 touchmove 事件,计算手指位置的偏移量,并根据偏移量改变图片位置。 4. 在 touchend 事件,清除定时器并重置状态。 下面是一个示例代码: ```javascript // 获取图片元素 var img = document.getElementById('image'); // 初始化状态变量 var startX = 0, startY = 0, moveX = 0, moveY = 0, timer = null; // 绑定 touchstart 事件 img.addEventListener('touchstart', function(e) { // 阻止默认事件 e.preventDefault(); // 记录手指位置和图片位置 startX = e.touches[0].clientX; startY = e.touches[0].clientY; moveX = img.offsetLeft; moveY = img.offsetTop; // 设置定时器,用于按判断 timer = setTimeout(function() { // 按触发,修改图片样式 img.style.border = '2px dashed red'; img.style.opacity = '0.5'; }, 500); }); // 绑定 touchmove 事件 img.addEventListener('touchmove', function(e) { // 阻止默认事件 e.preventDefault(); // 计算手指偏移量,并改变图片位置 var offsetX = e.touches[0].clientX - startX; var offsetY = e.touches[0].clientY - startY; img.style.left = moveX + offsetX + 'px'; img.style.top = moveY + offsetY + 'px'; }); // 绑定 touchend 事件 img.addEventListener('touchend', function(e) { // 阻止默认事件 e.preventDefault(); // 清除定时器 clearTimeout(timer); // 重置图片样式 img.style.border = 'none'; img.style.opacity = '1'; }); ``` 这段代码实现了在移动端图片后可以拖动图片,并且在按后会修改图片样式。注意,这段代码仅作为示例,实际应用还需要根据具体需求进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sun Peng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值