javascript设置鼠标(JavaScript实现鼠标控制自由移动的窗口)
类别:编程学习 浏览量:1545
时间:2021-10-23 10:21:56 javascript设置鼠标
JavaScript实现鼠标控制自由移动的窗口本文实例为大家分享了JavaScript实现鼠标控制自由窗口的具体代码,供大家参考,具体内容如下
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用鼠标移动的窗口</title> <style> .mainli { width: 350px; height: 200px; border: 2px black solid; position: absolute; } .titleli { width: 350px; height: 30px; background-color: YellowGreen ; text-align: center; line-height: 30px; } .contentli { width: 350px; height: 170px; background-color: SandyBrown ; text-align: center; } </style> </head> <body> <!--onmousedown:事件会在鼠标按键被按下时发生; onmousemove:事件会在鼠标指针移到指定的对象时发生--> <li class="mainli" id="mainli" style="top: 20px;left: 20px"> <li class="titleli" id="titleli" onmousedown="mouseDown()" onmouseup="mouseUp()"> 标题栏 </li> <li class="contentli"> 《鼠标可控的自由窗口》<br> 注意:没有给mainli设置position为absolute前不能移动 </li> </li> <script> var dx; var dy; var mainliObj = null; var titleliObj = null; /** * 鼠标按下函数,当鼠标按下时执行该函数 */ function mouseDown() { //获得鼠标的键值,0是鼠标左键;1是鼠标滚轴键;2是鼠标右键 if (event.button == 0) { mainliObj = document.getElementById("mainli"); titleliObj = document.getElementById("titleli"); //设置鼠标样式 titleliObj.style.cursor = "move"; //设置主li的阴影样式 mainliObj.style.boxShadow = "0px 0px 10px #000"; //获得鼠标当前坐标 let x = event.x; let y = event.y; dx = x - parseInt(mainliObj.style.left); dy = y - parseInt(mainliObj.style.top); } } //鼠标移动的时候调用 document.onmousemove = mouseMove; /** * 按下鼠标后移动函数,当鼠标移动是执行该函数,移动li */ function mouseMove() { if (mainliObj != null) { //获得鼠标当前移动的坐标位置 let x = event.x;//鼠标移动的x轴的坐标 let y = event.y;//鼠标移动的y轴的坐标 //计算li移动后的left与top的距离 //使用当前坐标减去鼠标在li中的位置与li左边与顶端的距离 let left = x - dx; let top = y - dy; //设置li新的坐标位置 mainliObj.style.left = left + "px"; mainliObj.style.top = top + "px"; } } /** * 鼠标松开函数,当鼠标松开时执行该函数 */ function mouseUp() { if (mainliObj != null) { dx = null; dy = null; //设置li的阴影样式 mainliObj.style.boxShadow="none"; mainliObj = null; titleliObj.style.cursor="pointer"; titleliObj = null; } } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- phpstudy 目录浏览宽度(JspStudy如何设置PHP根目录可编辑)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- ExtJs中怎么上传文件
- threejs 三维可视化(three.js模拟实现太阳系行星体系功能)
- js return false的作用
- JS中对象的属性
- php生成json信息(php使用json-schema模块实现json校验示例)
- vue前台解析pdf文件流(Vue实现在线预览pdf文件功能利用pdf.js/iframe/embed)
- extjs checkboxGroup 复选框的用法
- Extjs msgTarget 提示位置
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- js中拼接字符串的几种方法
- js判断对象是否存在
- js浮点数运算精度问题(JS超出精度数字问题的解决方法)
- JS匿名函数的用法
- 如何判断数据是json还是字符串(JSON.stringify的多种用法总结)
- 谁说女子不如男 范冰冰演的武则天只是其一,另外两位你认识吗(谁说女子不如男)
- 杯酒人生---瓦伦丁酒杯和奥丁格啤酒(杯酒人生---瓦伦丁酒杯和奥丁格啤酒)
- 中秋节买啤酒,预算超过7元试试这8种啤酒,麦香浓郁都是真啤酒(预算超过7元试试这8种啤酒)
- CellPress旗下的6 期刊,国人友刊来了解一下吧(CellPress旗下的6期刊国人友刊来了解一下吧)
- ()
- SCI检索 SSCI检索 EI检索 ISTP检索 CSCD检索简介(SCI检索SSCI检索EI检索)
热门推荐
- ucenter安装配置(使用ucenter实现多站点同步登录的讲解)
- css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)
- sqlserver数字格式化五位小数(详细分析sqlserver中的小数类型float和decimal)
- dedecms不生成文档(dedecms批量替换文章中超链接的方法)
- windows2003ftp配置(轻松架设Windows 2003用户隔离FTP站点的注意事项)
- pythontkinter详解(python3.6使用tkinter实现弹跳小球游戏)
- docker时区问题和迁移数据问题(docker时区问题和迁移数据问题)
- mysql8.0安装版安装详细教程(mysql 8.0.24版本安装配置方法图文教程)
- react 使用实例(React+高德地图实时获取经纬度,定位地址)
- css垂直左右居中的方式(css常用元素水平垂直居中方案)