用JavaScript实现鼠标调整div大小的代码举例
发布时间：2022-04-20 09:15:45 所属栏目：语言 来源：互联网
导读：本文实例为大家分享了JavaScript实现鼠标拖拽调整div大小的具体代码，供大家参考，具体内容如下。鼠标拖拽调整div大小的功能，类似于我们查看街景地图时，对缩小地图的操作。那么我们用JavaScript如何实现这样的效果呢？下面小编就给大家分享下用JavaScript
|
本文实例为大家分享了JavaScript实现鼠标拖拽调整div大小的具体代码，供大家参考，具体内容如下。鼠标拖拽调整div大小的功能，类似于我们查看街景地图时，对缩小地图的操作。那么我们用JavaScript如何实现这样的效果呢？下面小编就给大家分享下用JavaScript实现鼠标调整div大小的代码。 实现思路： 根据鼠标位置改变鼠标样式 当鼠标在div的边缘和四个角时显示不同的样式，通过cursor修改 当鼠标在div的边缘和四个角按下时记录具体坐标点位置， 并开始根据鼠标的移动修改div的尺寸 鼠标松开时结束尺寸修改 </style> </head> <body id="body"> <div id="container"> <div class="item"></div> </div> <script> //需要调整尺寸的div let c = document.getElementById('container') // body监听移动事件 document.getElementById('body').addEventListener('mousemove', move) // 鼠标按下事件 c.addEventListener('mousedown', down) // 鼠标松开事件 document.getElementById('body').addEventListener('mouseup', up) （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
