地址栏 / js 获取鼠标位置,实现图片域

38 篇文章 3 订阅
23 篇文章 1 订阅

先上代码和效果图

<a href="#">    
         <img src="~assets/img/index/map2.png" usemap="#map"  ismap="ismap"  @touchstart="move" class="photo1" @touchmove="move2"  >
</a>
  点击图片后,地址栏出现坐标

在这里插入图片描述

  • img标签内使用ismap属性(usemap属性是用作图片域的)
  • 用<a 标签> 套住标签

想要通过js获取数值

获取鼠标位置到标签边距离
pc端:e.clientX
移动端:e.changedTouches[0].clientX

odiv.offsetLeft ——odiv元素到窗扣边的距离

关于e怎么用,e是event缩写,你给img设置点击事件,形参不要,只写实参,在函数内打印一下e你就明白了,简单说就是浏览器纪录了你的行为,里面有各种数据,你可以使用。

<img @click=aa …>
aa(e) {
打印e
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值