![](https://img-blog.csdnimg.cn/e52188c126c34db88de456e9554fe726.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript Event事件
文章平均质量分 86
JavaScript的一些事件(键盘、鼠标、浏览器)等
满脑子技术的前端工程师
一枚热爱分享知识的前端程序猿!!!
现用名:【满脑子技术的前端工程师】 曾用名:[机智的前端小白][前端程序]
展开
-
js实现图片的放大缩小(鼠标长按拖拽、鼠标滚轮控制放大缩小)
背景与效果图1.背景如下(功能图):2.效果图如下:拖拽后的效果缩放的效果放大的效果一、功能:支持鼠标长按拖拽1.鼠标事件:2.拖拽功能流程3.拖拽部分代码如下二、功能:滚轮控制图片放大缩小1.鼠标事件(推荐使用onwheel;mousewheel存在安全隐患)2.功能流程:3.具体代码如下:三、案例功能的完整代码如下:四、总结(一定要看,功能是有坑的)原创 2022-12-20 17:30:40 · 12074 阅读 · 1 评论 -
如何控制滚轮横向滑动(原生JS实现方法)
控制滚轮横向滑动解决思路如下`1.如何在页面中展示横向滚动条``2.如何获取鼠标的【滚动轮】``3.通过什么Api去实现滚动效果 `一、如何创建横向滚动条1.代码如下(HTML和CSS)2.效果如下图所示:二、鼠标滚动轮事件(mousewheel和wheel事件)1.wheel鼠标滚轮(完美支持所有浏览器)JS代码如下所示:`*&*需要注意的事项(wheel滚动方向)*&*`:2.mousewheel支持该鼠标事件的浏览器如下(生产环境不可使用,应该使用wheel)测试效果图如下原创 2022-10-22 18:51:09 · 7470 阅读 · 0 评论 -
JS拖拽 和 Vue - draggable 两种方法实现拖拽功能(案例二)
表格拖拽(两种实现方法)前言一、原生的javascript实现拖拽效果1.创建一个table表格代码如下效果图如下:2.获取DOM结构(表格的结构)代码如下:3.拖拽逻辑(这里使用的事件冒泡)代码如下:效果图如下:1.拖拽前的样式,如下图:2.拖拽(序号1和序号2互换位置)二、vue-draggable实现拖拽(vue2和vue3都有版本)1.npm 安装 vue-draggable 插件(vue3)代码如下:如下图所示:2.vue-draggable的Api原创 2022-10-18 17:39:38 · 1721 阅读 · 0 评论 -
Js中六种拖拽(拉)事件(drag 和 drop)
拖拽事件(待更新)前言(各个浏览器的兼容性)1.兼容性如下图:一、相关的五个事件api如下:拖拽流程说明:1.dragstart事件2.dragenter事件3.dragover事件4.drop事件(必须要dragover事件触发)5.dragend事件MDN详细说明:链接如下如下图所示:二、相关的属性1.draggable(让元素可拖拽)draggable解释说明:使用代码如下:如下图所示:2.dataTransfer(对应的拖拽媒介)解释说明(通用方法):原创 2022-10-17 21:15:31 · 6646 阅读 · 0 评论 -
案例一:javascript的拖拽事件(drag,drop)
一、拖拽效果如下步骤所示1.正常的排序如下:2.拖拽列表1与列表2互换位置常按的效果如下图:切换位置后的效果如下图:二、具体代码如下1.HTML部分代码块2.javascript部分代码块3.js代码说明:总结:下面的🔗是跳转到案例二(关于 表格的拖拽的效果)原创 2022-10-17 20:30:01 · 3854 阅读 · 0 评论