元素偏移量 offset —— 获取鼠标在盒子内的坐标

最新推荐文章于 2021-11-04 19:45:00 发布

没人回复我哼

最新推荐文章于 2021-11-04 19:45:00 发布

阅读量681

点赞数

文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/qq_45645902/article/details/105893712

版权

通过监听鼠标点击和移动事件，结合e.pageX、e.pageY获取鼠标在页面的坐标，再减去盒子offsetLeft和offsetTop，可以计算出鼠标在盒子内的具体位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习来源：https://www.bilibili.com/video/BV1HJ41147DG

要求
在盒子内点击，得到鼠标距离盒子左右的距离。

思路

首先得到鼠标在页面中的坐标（e.pageX, e.pageY）
其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop)
用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标
如果想要移动一下鼠标，就要获取最新的坐标，使用鼠标移动事件 mousemove

<!DOCTYPE html>
<html lang="en">

<head>
    <meta cha

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

没人回复我哼

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS三栏布局（左右两栏固定宽度，中间栏优先加载，宽度自适应的双飞翼布局）

大叔学前端的博客

08-04

368

自己在做一个后台管理系统，没有美工，就自己用CSS简单搞一个三栏布局的页面。左右两栏固定宽度，中间栏优先加载，宽度自适应的双飞翼布局。上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS三栏布局、左右两栏固定宽度</title> <style type="text/css">* {

CSS3实现三栏布局左右固定中间自适应 /圣杯布局/双飞翼布局

qq_57404393的博客

09-05

543

中间一栏先加载和渲染，两侧内容固定，中间内容随着宽度自适应一般用于pc端网页1、先写出3个盒子2、中间盒子加上，为了添加中间的顺序要为3.新添加的盒子各设置宽，高。然后左盒子设置左浮动，右盒子设置右浮动，触发bfc盒子。

1 条评论您还未登录，请先登录后发表或查看评论

三列布局，中间先加载，三列等高

Jxchen

11-14

904

*{ margin:0; padding:0; color:#FFFFFF; font-size:12px; } h2{color:#000000;} .box{ overflow:hidden; zoom:1; width:900px; margin:0 auto 20px;} .box span{ color:#f00; display:block; text-align:center;

面试题：写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块，请写出结构及样式：

David的博客

03-21

924

html <h3>test</h3> <div class="left"></div> <div class="right"></div> <div class="middle"></div> css html,body{ ...

float浮动怎么居中？

一粒程序米

11-04

1791

<view class="page"> <span class="pageDown">上一页</span> <span class="pageUp" >下一页</span> </view> .page{ float:left; position: relative; left: 50%; margin-bottom: 20px; } .page span{ float:left; positi

左中右布局，中间自适应并优先显示在前面

weixin_30376083的博客

04-15

240

<div class="container"> <div class="center"> <div class="cont">中间内容</div> </div> <div class="left">左侧内容</div> <div class="right">右侧内容...

DIV+CSS 三栏布局实例代码

09-25

`boxmain`类用于创建浮动效果，并通过负外边距确保`MAIN`栏优先加载。总结来说，`DIV+CSS`三栏布局的关键在于理解`float`和`position: absolute`的用法。`float`用于在流式布局中让元素左右排列，而`position: ...

如何做出双飞翼布局与圣杯布局

01-08

3. 使用浮动布局使所有子元素水平排列，并设置中间栏（center）的宽度为100%以实现自适应。 4. 对左右侧栏使用相对定位，使其向左右平移各自宽度相等的距离，以达到两侧固定的效果。 5. 为外层容器添加内边距...

精通Flex布局：Web前端HTML+CSS进阶教程

圣杯布局是一种经典的三栏布局，中间栏优先加载，左右栏在页面宽度足够时浮动在中间栏的两侧，当页面宽度变窄时则堆叠在中间栏下面。这种布局方式在早期网页设计中十分流行，因为它能够在不支持CSS3媒体查询的旧...

双飞翼布局和圣杯布局

01-08

网页开发中，经常会遇见左中右垂直三栏的布局方式，两侧结构宽度固定，中间自适应，有时候需要优先加载中间区域，那么便在DOM结构上便有所要求，需要中间区域在前，左右区域在后。首先三个元素横向排列，用浮动...

双飞翼布局(先加载中间，左右宽度为200，中间自适应)

qq_44631273的博客

02-23

232

双飞翼布局先加载中间，左右宽度为200，中间自适应 <div class="main"> <div class="container"> <div class="center">中间</div> </div> <div class="left">左</div> <div cla...

CSS彻底研究(3) - 浮动,定位

weixin_30291791的博客

07-07

269

Github pages 博文 CSS彻底研究(3)-浮动,定位一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况。当float : left;时，元素就会向其父元素的左侧靠紧，脱离标准流，同时宽度不再伸展至充满父容器，而是根据自身内容来确定。 II . 演示规则准备代码 <html xmlns="http://www.w3.org/1999/xhtm...

左右固定中间自适应并优先加载的布局

在下魔王ii的博客

08-11

411

中间优先加载的意思就是说，中间这部分需要放在左右部分之前，先被解析加载。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>自适应宽度，左右两栏固定宽度，中间栏优先加载</title> <style> .container

css布局：三列布局，中间内容优先加载

weixin_34138521的博客

06-03

431

上周面试前端开发时候，遇到这样的笔试题目，三列布局，中间内容优先加载，左右两边的div宽度都是200px。我首先想到的是方法是：父级div相对定位，中间的div左右边距都是210px；左右两边的div都绝对定位，分别位于左右两边。在纸上写完，我当时觉得没啥问题啊，但是面试我的考官却对这样布局能否实现效果表示怀疑,当然他也不确定，可能他用的是其他方法。我回家后，试了一下，确实没问题啊。。解决...

浮动布局的方法（总结）

热门推荐

bingkingboy的博客

04-01

1万+

HTML布局中浮动布局非常常见，很多网站普遍都会使用到浮动布局，博客网站使用最多。做过很多网站，却没有总结过，今天就来分享下自己在浮动布局的总结（本文以微博为例）微博排版先上图片：盒子中包含左右两个子盒子（用黑边框将其分开），就以这种左右两栏为布局的模型，来总结浮动布局的方法。浮动布局HTML排版 <div class="container">

关于三栏布局中浮动布局div块的先后顺序

wpbfj的博客

03-15

1651

常用的三栏布局中，用的较多的浮动布局，会因为div块的先后顺序而产生不同的效果。这种情况下，一般左右两栏div需要在中间栏之前。这样，才能让左右两个边栏浮动到它们应该的位置上，以此来使得中栏能够进入中间的空间，并自适应布局。若是浏览器在一个或者两个边栏div之前发现中栏，那么中栏会先占据一侧或者两侧位置，这样浮动的部分就会跑到中栏的下面。如下：上理前端分队

position定位与float的优先级

Kratial的博客

09-26

896

当在同一个元素中同时使用浮动和定位时，会有一下两种情况： 1.当定位为absolute或fixed时，float会失效 2.若定位不是absolute和fixed时，两个同时起作用，且float的优先级更高。

左中右布局的几种方式及重要部分优先加载

在下魔王ii的博客

08-11

386

自行运行查看效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>110blank</title> <script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script> <style> .