首页 > 其他分享 >css盒子跟随鼠标绘制点和线

css盒子跟随鼠标绘制点和线

时间:2023-04-25 10:14:51浏览次数:40  
标签:box style 鼠标 点和线 px var document evt css

<!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title></title>     <style>       html,body{         width: 100%;         height: 100%;       }             #box{         height: 100px;         width: 100px;         background:deeppink;         position: absolute;       }     </style>   </head>   <body>     <div id="box">       <p id="p1"></p>       <p id="p2"></p>     </div>   </body> </html> <script>     var box = document.getElementById("box");   var p1=document.getElementById("p1");   var p2=document.getElementById("p2");   document.onmousemove = function(evt){     var e = evt || event;     box.style.left = e.pageX + "px";     box.style.top = e.pageY  + "px";     p1.innerHTML=box.style.left;     p2.innerHTML=box.style.top;     document.body.onmousemove=function(evt){       var d=document.createElement("div");       var e = evt || event;       d.style.width="5px";       d.style.height="5px";       d.style.background="red";       d.style.borderRadius="50%";       d.style.position="absolute";       document.body.appendChild(d);       d.style.left = e.pageX + "px";       d.style.top = e.pageY  + "px";     }   } </script>

标签:box,style,鼠标,点和线,px,var,document,evt,css
From: https://www.cnblogs.com/yadi001/p/17351784.html

相关文章

  • 鼠标绘制实现画画效果
     话不多说直接解释一下:  制作流程  首先我们需要用射线来判断 和需要一个线组件和材质球 才给每次创建的空物体赋值然后需要一个list数组来接收我们每次创建的物体  这个很关系 可以制作成  删除画面内容形成原理:个人理解  : 按钮按下一次 创建......
  • electron鼠标经过托盘显示自定义菜单
    1.自定义菜单//自定义菜单vartemplateMenu=[{label:"首页",submenu:[{label:"111"},{label:'9089'}]},,{label:"编辑",submenu:[{label:'123'}]}]testmenu=Menu.buil......
  • css 渲染优化的方式
    1、加载性能优化:css压缩、css单一样式、减少使用@import,而建议使用link;2、 选择器性能优化:避免使用通配规则*尽量少的去对标签进行选择,而是用class不要去用标签限定ID或者类选择符:ul#nav,应该简化为#nav尽量少的去使用后代选择器,降低选择器的权重值考虑继承3、渲染......
  • 通过 css 控制 window.print 的样式
    打印页面隐藏打印按钮在button按钮加一个class样式class="print-button-container"调用window.print方法的页面加以下css<stylescopelang="scss">@mediaprint{.table-print-disable{display:none;}@page{/*纵向打印*/size:p......
  • CSS6大种选择器
    一、常用的css基本选择器(4种)1、标签选择器结构: 标签名{css属性名:属性值}作用:通过标签名,找到页面中所有的这类标签,设置样式注意:1.标签选择器选择的是一类标签,而不是单独的一个2.标签选择器无论嵌套关系有多深,都能够找到对应的标签<style>p{color:red;}......
  • HTML-CSS笔记
    HTML一、网页的基本结构和基础1、html基础<!doctypehtml><html> <head> <!--可以通过meta标签来设置网页的字符集,避免乱码的问题--> <metacharset="UTF-8"/> <title>网页的基本结构</title> </head> <body> <!-- 迭代 网页的版本......
  • 如何使用 css 将页面缩小/缩放到 90%
    当我使用像笔记本电脑这样的设备时,它被放大了,当我缩小到90%时,它看起来好多了。我使用了缩放:90%;首先,但这不适用于Firefox或safari。通过一些研究,我发现transform:scale(0.9); 是要走的路。ZoomIE适用。但是,当我这样做时html或body{transform:scale(0.9); 它使网站......
  • H5页面新增鼠标右击和长按触发事件
    H5页面新增鼠标右击和长按触发事件,不影响点击事件。示例如下:1.新增触发事件<van-cellclass="list-item"v-for="itemindataSource.list":key="item.id"@touchstart="longPress(item,index)"@touchend="removePress(item,index)"......
  • html css 怎么导入外部css
    在HTML文件中导入外部CSS样式表,可以使用<link>标签。具体步骤如下:创建一个样式表文件(通常以.css扩展名为后缀),并将所有的CSS样式规则存放在该文件中。在HTML文件中添加一个<link>标签,指定rel="stylesheet"属性和href属性,其中href属性值应该是样式表文件的U......
  • vue学习 第四天 css ---元素显示模式 display
     导学: 1)设置元素显示模式display2)block(块)、inline(行内)、inline-block(行内块)3)每一种元素模式的特点 1、元素显示模式:  独占一行 (块元素)和 共用一行(行内元素)HTML元素一般分为块元素和行内元素两个类型。 2、块元素:<h1>~<h6>、<p>、<div......