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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- JS文件智能提示另一个JS文件中的成员
- python获取json结果保存文本(Python JSON格式数据的提取和保存的实现)
- js中toFixed() 的使用
- Js操作cookie
- 火狐查看json数据
- nodejs启动web服务器(使用NODE.JS创建一个WEBSERVER服务器的步骤)
- js移动端菜上下滑动效果(JS实现移动端上下滑动一次一屏)
- js的事件处理程序底层原理(关于js的事件循环机制剖析)
- extjs中treegrid
- 在html中使用javascript实例代码(原生 JS+CSS+HTML 实现时序图的方法)
- ExtJs中怎么上传文件
- thinkphp返回json(thinkphp5框架实现数据库读取的数据转换成json格式示例)
- js日期格式化
- js判断浏览器的版本
- 用js做一个计算器(使用JS实现简易计算器)
- js实现CSS格式化和压缩
- 王治郅菜鸟赛季已让八一带入正轨,大郅七大经典语录或是成功秘诀(王治郅菜鸟赛季已让八一带入正轨)
- 庆八一,重读经典红色语录,感悟互联网发展硬道理(重读经典红色语录)
- TVB新剧《黯夜守护者》将播,陈展鹏陈炜首次合作探讨人性(TVB新剧黯夜守护者将播)
- 新晋小花被称女版吴卓羲 将取代滕丽名成为TVB新一代御用女警(新晋小花被称女版吴卓羲)
- 艺人吴卓羲10年警察生涯,演足10年阿Sir,系咩玩法(艺人吴卓羲10年警察生涯)
- 菲律宾潜水(菲律宾潜水价格)
热门推荐
- docker获取自己的容器id(docker 如何添加证书)
- apachephp安装配置教程交流(Apache中利用mod_rewrite实现防盗链)
- log4net 使用
- h5页面强制关注微信公众号(Html5页面获取微信公众号的openid的方法)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- C# 扩展方法
- css中div高度自适应
- javascript 开发网站(帮你提高开发效率的JavaScript20个技巧)
- thinkphp5 api开发(thinkphp5框架前后端分离项目实现分页功能的方法分析)
- linux中用户管理命令(Linux usermod 命令的使用)