JS 获取DIV中鼠标相对位置的方法

//获取div的x位置

function getX(obj){
var ParentObj=obj;
var left=obj.offsetLeft;
while(ParentObjParentObj=ParentObj.offsetParent){
left+=ParentObj.offsetLeft;
}
return left;
}
//获取div的y位置
function getY(obj){
var ParentObj=obj;
var top=obj.offsetTop;
while(ParentObjParentObj=ParentObj.offsetParent){
top+=ParentObj.offsetTop;
}
return top;
}

//显示鼠标点击处相对div的位置
function DisplayCoord(event)
{
var top,left,oDiv;
oDiv=document.getElementById("demo");
top=getY(oDiv);
left=getX(oDiv); 
alert( (event.clientX-left+document.body.scrollLeft)+"px"); 
alert( (event.clientY-top+document.body.scrollTop)+"px");
}

//注意,若页面有DTD头则应该将document.body.*改成document.documentElement.*

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于 JavaScript 的以鼠标位置心的滑轮放大功能的示例代码: ```html <!DOCTYPE html> <html> <head> <title>Zoom on Mousewheel</title> <style> .container { position: relative; width: 500px; height: 500px; overflow: hidden; } .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://picsum.photos/500'); background-size: cover; background-position: center; transition: transform 0.5s ease-in-out; transform-origin: left top; } </style> </head> <body> <div class="container"> <div class="image"></div> </div> <script> var container = document.querySelector('.container'); var image = document.querySelector('.image'); var x = 0, y = 0, scale = 1; container.addEventListener('wheel', function(event) { event.preventDefault(); var delta = event.deltaY; var rect = container.getBoundingClientRect(); x = event.clientX - rect.left; y = event.clientY - rect.top; scale += delta > 0 ? -0.1 : 0.1; scale = Math.min(Math.max(scale, 0.5), 3); image.style.transform = 'translate(-' + x + 'px, -' + y + 'px) scale(' + scale + ') translate(' + x + 'px, ' + y + 'px)'; }); </script> </body> </html> ``` 这个示例代码,我们首先创建了一个 div 容器,内部包含一个具有背景图片的 div 元素。我们使用 CSS 将其设置为相对定位容器,并将其宽高设置为 500px,并将 overflow 属性设置为 hidden,以便我们可以在容器内部缩放背景图片。 我们还使用 CSS 将背景图片的宽高设置为 100% 并且使用 background-position 属性将其居。我们还对 div 元素应用了一些过渡和变换效果,以便在缩放时过渡平滑。 接下来,我们使用 JavaScript 获取容器和图像元素,并声明了一些用于存储当前缩放比例和鼠标位置的变量。我们将鼠标位置存储在变量 x 和 y ,并使用事件对象的 delta 属性检测滑轮滚动方向。我们将缩放比例存储在变量 scale ,并使用 Math.min 和 Math.max 方法限制其值在 0.5 和 3 之间。 最后,我们使用变换属性将图像元素缩放到指定比例,并将其移动到鼠标位置。这是通过先将图像元素向左上角移动 x 和 y 像素,然后进行比例缩放,最后再将其向右下角移动 x 和 y 像素来实现的。 这就是一个简单的以鼠标位置心的滑轮放大功能的示例代码。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值