![](https://img-blog.csdnimg.cn/dd43b1ff2ed444b2adcbc3da33b622fa.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
HTML|CSS
文章平均质量分 81
页面结构和页面样式上的问题!!!!!!
满脑子技术的前端工程师
一枚热爱分享知识的前端程序猿!!!
现用名:【满脑子技术的前端工程师】 曾用名:[机智的前端小白][前端程序]
展开
-
楼层滚动效果(超级简单,易懂)
系列文章目录一、楼层滚动效果图如下1. 下图是纯Css实现的楼层滚动2.通过Js优化后的楼层滚动如下图(🌹🌹)二、楼层滚动(Css实现)1.滚动原理2.代码如下三、楼层滚动(Js+Css优化后的楼层滚动)HTML、CSS代码如下JS代码如下总结(收工)原创 2023-04-26 16:58:34 · 1640 阅读 · 0 评论 -
IE、Chrome、Firefox浏览器隐藏滚动条(IE、火狐、谷歌浏览器)
一、背景和效果图如下:1.背景2.设置属性前效果图:2.设置后效果图:二、直接通过CSS修改样式,保存滑动功能1.全局设置滚动条如下(谷歌Chrome)Css代码如下效果图如下2.给某一个元素设置如下(谷歌Chrome)Css代码如下效果图如下三、这里其他浏览器的方法1.IE去除滚动条样式(IE10以上内核)2.火狐除滚动条样式(Gecko 内核)总结原创 2022-12-21 17:52:04 · 7183 阅读 · 10 评论 -
js实现图片的放大缩小(鼠标长按拖拽、鼠标滚轮控制放大缩小)
背景与效果图1.背景如下(功能图):2.效果图如下:拖拽后的效果缩放的效果放大的效果一、功能:支持鼠标长按拖拽1.鼠标事件:2.拖拽功能流程3.拖拽部分代码如下二、功能:滚轮控制图片放大缩小1.鼠标事件(推荐使用onwheel;mousewheel存在安全隐患)2.功能流程:3.具体代码如下:三、案例功能的完整代码如下:四、总结(一定要看,功能是有坑的)原创 2022-12-20 17:30:40 · 11604 阅读 · 1 评论 -
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 · 1637 阅读 · 0 评论 -
前端本地文件上传预览 (拖拽,表格上传的三种方法)
零、补充1.文件预览&&文件拖拽2.表单数据上传(三种方法)一、如何实现上传文件?1.使用标签 input:2.效果图:二、获取到上传的文件info1.获取Dom节点代码如下:2.绑定事件代码如下:说明图如下:in show & 🔗...原创 2022-07-22 14:53:29 · 2641 阅读 · 2 评论 -
前端文件下载的八种方法(解决pdf、图片在浏览器自动打开问题)
系列文章目录一、直接使用a标签下载文件(三种方法)第一种:下载.zip(压缩文件)第二种:下载.txt(文本文件)第三种:指定网络地址下载文件第四种:下载pdf文件(浏览器不自动打开)二、使用JavaScript(四种方法)第一种:绑定点击事件第二种:指定location的href地址第三种:使用form表单的下载文件第四种:使用saveAs(url)方法(谷歌、火狐等新浏览器不适用,只支持老的IE6、7、8)三、使用canvas进行图片下载(防止浏览器自动打开图片)代码片段如下所示原创 2021-11-18 22:41:42 · 29285 阅读 · 13 评论