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

待我称王封你为后i 2022-10-06 08:53 200阅读 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 条评论，200人围观）

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

相关阅读

相关 HTML------06-------盒子模型

理解盒子模型及其构成会计算盒子模型尺寸会使用盒子模型的两种解析方式来布局网页会使用圆角属性给网页元素添加圆角效果会使用盒子阴影属性给网页元素添加阴影效果

墨蓝/ 2024年04月29日 11:09/ 0 赞/ 71 阅读

相关盒子阴影（HTML、CSS）

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

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

相关盒子定位HTML

相对定位的特性relative 相对于自己的初始位置来定位元素位置发生偏移后，它原来的位置会被保留下来层级提高，可以把标准文档流中的元素及浮动元素盖在下边

末蓝、/ 2023年10月02日 10:26/ 0 赞/ 21 阅读

相关 HTML的盒子（div）

每一个标签都是一个盒子。每一个盒子都有四个属性（1）内容（content：height、width）盒子里装的东西；网页中通常是指文字和图片。（2）填

红太狼/ 2023年07月19日 05:58/ 0 赞/ 2 阅读

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

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

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

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

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

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

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

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

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

相关 html标签的盒子模型

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

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

相关关于javascript在html中的位置

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

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

相关 html5盒子模型

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

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