HTML字在盒子的位置,鼠标在盒子里的位置变化.html

待我称王封你为后i 2022-10-06 08:53 181阅读 0赞

Title

.box\{

width: 300px;

height: 200px;

padding-top:100px;

background-color:pink;

margin:100px;

text-align:center;

font:18px/30px "simsun";

cursor:pointer;

\}

鼠标在盒子中的X坐标为：100px;

鼠标在盒子中的Y坐标为：100px;

function scroll()\{

//简单版

return\{

"top":window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,

"left":window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft

\};

\}

//鼠标进入盒子中之后只要移动，哪怕1像素，随时更换里面的内容(鼠标在盒子里坐标)

var div=document.getElementsByTagName("div")\[0\];

div.οnmοusemοve=function(event)\{

event=event||window.event;

var pagex=event.pageX||scroll().left+event.clientX;

var pagey=event.pageY||scroll().top+event.clientY;

var xx=div.offsetLeft;

var yy=div.offsetTop;

var targetx=pagex-xx;

var targety=pagey-yy;

this.innerHTML="鼠标在盒子中的X坐标为："+addZ(targetx)+"px;"+"  
"+"鼠标在盒子中的Y坐标为："+addZ(targety)+"px;"+"  
";

\}

function addZ(num)\{

if(num<100&&num>10)\{

num="0"+num;

\}else if(num<10)\{

num="00"+num;

\}else\{

num=num+"";

\}

return num;

\}

一键复制

编辑

Web IDE

原始数据

按行查看

历史

发表评论取消回复

表情：

评论列表（有 0 条评论，181人围观）

还没有评论，来说两句吧...

相关阅读

相关盒子阴影（HTML、CSS）

盒子阴影（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <met

你的名字/ 2023年10月03日 13:05/ 0 赞/ 3 阅读

相关 HTML/CSS 三个小盒子在一个大盒子中水平居中

HTML/CSS 三个小盒子在一个大盒子中水平居中方法一：把子盒子变成行内块 <!DOCTYPE html> <html lang="en">

系统管理员/ 2023年01月02日 11:28/ 0 赞/ 199 阅读

相关 HTML的两种盒子模型

一、引入在网站的制作中，一个复杂的页面，被划分为一个一个的小块。通过这种划分，把网站的开发过程化整为零、化繁为简，以达到减少开发工作，减轻维护压力的目的。

た入场券/ 2022年12月26日 08:24/ 0 赞/ 118 阅读

相关 html盒子触发打开,CSS3 盒子打开的动画

CSS 语言： CSSSCSS 确定 html, body \{ height: 100%; \} body \{ font-size: 150px; ov

比眉伴天荒/ 2022年10月07日 07:57/ 0 赞/ 150 阅读

相关 html位置发生变化监听,html监听 --- 监听html文档结构变化

/\config属性 childList：子元素的变动 attributes：属性的变动 characterData：节点内容或节点文本的变动 subtree：所有下属

快来打我*/ 2022年10月06日 11:45/ 0 赞/ 270 阅读

相关 HTML字在盒子的位置,鼠标在盒子里的位置变化.html

Title .box\{ width: 300px; height: 200px; padding-top:100px; background-color:pink;

待我称王封你为后i/ 2022年10月06日 08:53/ 0 赞/ 182 阅读

相关 “位置”在css里的细节

位置是个怎样的概念哎，这个元素怎么跑那里去了？回想一下，在我们觉得“样式崩了”，“页面出bug了”的时候，是不是会有相当一部分情况都可以描述成上面这句话呢？我们

冷不防/ 2022年07月12日 06:14/ 0 赞/ 241 阅读

相关 html标签的盒子模型

在HTML 的标签中<div></div>标签被称作盒子模型，也就是说我们把整个网页当做是一个大盒子，在网页里我们放许多小盒子<div></div>标签，我们可以用<div><

旧城等待，/ 2022年04月17日 06:05/ 0 赞/ 356 阅读

相关关于javascript在html中的位置

//转发自https://www.cnblogs.com/zrl66/p/6046526.html 关于javascript放在哪里更合适脚本位置：例如以下代

野性酷女/ 2022年03月27日 11:58/ 0 赞/ 216 阅读

相关 html5盒子模型

相关博客： Flex 布局教程：语法篇：[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][h

川长思鸟来/ 2022年01月05日 05:59/ 0 赞/ 232 阅读