文章目录 1、常用事件2、鼠标拖曳特效编写HTML页面编写CSS鼠标拖拽原理处理鼠标按下事件处理鼠标移动事件处理释放鼠标按键的事件处理关闭弹框事件

1、常用事件

鼠标事件是Web开发中最常用的一类事件。 例如，鼠标滑过时，切换Tab栏显示的内容；利用鼠标拖拽曳状态框，调整它的显示位置等，这些常见的网页效果都会用到鼠标事件。

2、鼠标拖曳特效

在Web开发中，为了提供良好的用户体验，经常会对页面中弹框提供可拖拽的特效。

编写HTML页面

编写CSS

鼠标拖拽原理

根据鼠标的移动位置来计算盒子的移动位置。首先，要通过CSS样式为盒子设置定位，否则即使通过JavaScript代码修改盒子的位置也无法完成移动。 盒子的位置（left和top值）= 鼠标的位置（left和top值）- 鼠标按下时与盒子之间的距离（left和top值）。

处理鼠标按下事件

处理鼠标移动事件

最后一行代码是当用户在拖拽条的文字上快速拖动时，避免选中上面的文本。 为了使用户体验更好，在鼠标大幅度进行移动时，也能实现拖拽效果，故为document文档绑定鼠标移动事件。

处理释放鼠标按键的事件

用户松开鼠标按键后，依然可以进行拖拽。 故实现鼠标按钮松开后，弹框不再移动。

处理关闭弹框事件

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。