一些demo
hst❀
前端踩坑记录/速查本/不定期更新
展开
-
原生js实现列表自动滚动循环播放
1.实现效果图鼠标移入,暂停滚动; 鼠标移出,继续滚动;2.实现代码原理及注意点:1.要实现无缝衔接,在原有ul后面还要有一个一样内容的ul;2.最外层div为可视区域,设overflow:hidden;3.2个ul的高度 > 外层可视div高度,才能滚动;html:<!-- vue --><div id="review_box" @mouseover="rollStop()" @mouseout="rollStart(60)"> <ul id原创 2020-08-03 16:14:04 · 5875 阅读 · 1 评论 -
vue 监听元素大小变化 element-resize-detector 并移除监听 uninstall
前言: 记录一个好用的包,在做自适应模块的时候,可以实时监听页面中元素的宽高变化,弥补了window.onresize只能监听由于浏览器大小引起的元素变化;安装方法:npm install element-resize-detector或<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>使用:<div ref="box"原创 2020-07-23 16:27:52 · 4032 阅读 · 0 评论 -
css3 背景渐变色实现过渡效果
对于设了渐变颜色的background,css会当做背景图片处理,这时直接设过渡transition会没有效果;整理了两种用过的,给渐变背景加过渡的方法:方法一:利用background-position,通过改变背景位置实现过渡<div class="btn"></div>.btn{ background: linear-gradient(72deg,rgba(5,120,255,1) 0%,rgba(0,177,255,1) 50%,rgba(0,177,255,原创 2020-07-23 16:08:17 · 4050 阅读 · 0 评论 -
js 实现点击按钮复制文本
原理:浏览器提供了 copy 命令 ,可以复制选中的内容document.execCommand("copy")因为 select() 方法只对 和 有效,可以通过 select() 方法,选中输入框的文本,然后调用 copy 命令,将文本复制到剪切板,代码部分:html:<input readonly id="copy_select" :value="35085412124542154"><button @click="copyId()"></but原创 2020-05-28 11:33:07 · 437 阅读 · 0 评论 -
js 写一个前端图片查看器
网上已经有不少成熟的图片查看器插件,如果是单纯想要点击图片放大预览的话,可以直接使用插件。例如viewerjs但是,当打开图片后还需要对图片进行一些像删除、下载、标记等业务层面上的操作,使用插件就显得不那么便捷,于是决定自己简单写个图片查看器思路:项目中用的是vue+iview,于是使用Modal弹窗组件做为播放器的盒子,考虑需要用到的基本功能有:放大、缩小、拖拽、全屏查看、查看上/下一张、双击图片回到初始大小和初始位置完成效果如图:代码大致思路如下:html部分:<Modal id="原创 2020-05-18 11:30:47 · 1968 阅读 · 0 评论 -
Vue中使用viewer.js图片查看器
最近开发需要用到点击图片放大查看,找到一个好用的插件,简单记录下插件安装:npm install viewerjs --save插件引入://main.jsimport Viewer from 'viewerjs';import 'viewerjs/dist/viewer.css';html部分:<!-- 使用情况1: --><img id="viewerDom" src="xxx.png" alt=""><!-- 使用情况2: --><原创 2020-05-18 10:28:08 · 1218 阅读 · 0 评论 -
canvas 实现截图功能——截取图片的一部分
整理一下最近在vue项目中做的一个截图功能(只能够截取图片),即鼠标在画布上拖动进行框选截取。窗口里面的html主要是三个部分,一个是可截图区域,一个是截取图片的回显,一个是操作按钮(截图按钮和取消截图按钮)。思路大概如下:做一个弹窗,打开弹窗的时候传入要截的图,接下来在这个窗口里面,点击截图按钮,开始截图,点击取消按钮,取消截图。<!--截图区域--><div id="clip-img-w" class="img_box"> <canvas id="drawc原创 2020-05-15 14:50:39 · 8845 阅读 · 20 评论 -
zTree的使用踩坑记录(编辑、新增)
最近做了一个功能,在vue中使用到了zTree,要求实现树节点的新增和编辑,踩了不少坑,记录下~首先是先在main.js引入ztree插件记住,如果有用到ztree自带的编辑或删除,一定要记得引入 jquery.ztree.exedit.min;同时,ztree没有添加节点的按钮,需要我们自己创建添加html部分只需要:<ul id="resourceTree" class="ztree"></ul>接下来,在data里面设一下树的配置配置:setting: {原创 2020-05-14 18:35:27 · 2546 阅读 · 2 评论 -
canvas 网站背景鼠标吸附线条动画
完整代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script>! function() { funct...转载 2020-01-15 14:09:35 · 488 阅读 · 0 评论 -
canvas 鼠标绘制多边形,可自动吸附闭合
完整代码:(记得引入jQuery)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas绘制多边形</title> <script src="jQuery.js"></script>...原创 2020-01-15 10:19:34 · 4245 阅读 · 13 评论 -
canvas 制作动效线条背景(可与鼠标交互)
完整代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas id="canvas"></canvas&g...原创 2020-01-15 10:12:23 · 1046 阅读 · 0 评论 -
纯html+css+jq实现流程图
效果图:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>流程图</title> <script src="../assets/lib/jQuery.js"></script><...原创 2019-10-12 11:25:14 · 4270 阅读 · 0 评论 -
css实现下拉菜单以及下拉箭头旋转效果
<div class="header-admin"> <div class="header-admin-name">用户名</div></div>.header-admin-name{ position: relative;}.header-admin>div.header-admin-name::before {...原创 2019-10-12 11:07:27 · 3287 阅读 · 0 评论 -
利用css实现鼠标经过元素,下划线由中间向两边展开
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>鼠标移入下划线展开</title><style type="text/css">#underline{ width: 200px; height: 50px...原创 2019-10-08 09:05:04 · 393 阅读 · 0 评论 -
点击按钮-侧边组件面板实现展开收缩动画
HTML:<button class="pull-out-btn"></button><div class="list-panel list-panel-hidden"></div>CSS:.list-panel{ position: absolute; left: 0; top: 0; width: 300px;...原创 2019-10-12 10:38:33 · 1775 阅读 · 0 评论 -
jQuery实现tab切换
$('#tab-content li').click(function() { var i = $(this).index();//下标第一种写法 //var i = $('tit').index(this);//下标第二种写法 $(this).addClass('cur').siblings().remove...原创 2019-08-08 15:07:05 · 128 阅读 · 0 评论 -
原生js实现侧边导航滚动监听(不用锚点)
js代码部分如下:1.监听滚动条,滚动一定距离时,返回顶部按钮出现,滚动页面相应导航li的弹出 var allDiv = document.querySelectorAll("#wrap div"); var allNavLi = document.querySelectorAll("#nav li"); function toTopIcon() { wi...原创 2018-10-27 14:43:25 · 2693 阅读 · 1 评论 -
js设置表格奇偶行的不同颜色,实现斑马效果
让表格里的行更具有可读性的常用技巧是交替改变它们的样式背景,从而形成斑马线效果,使相邻的两行泾渭分明。通过分别设置奇数行和偶数行样式的办法可实现这种效果。如果浏览器支持CSS3,那么只需要如下两行样式:tr:nth-child(odd){background-color:#ffc;}tr:nth-child(even){background-color:#fff;}另一种方法,可以编写一个...原创 2018-10-30 14:32:15 · 2755 阅读 · 0 评论 -
js用滚动条模拟横向时间轴
原理是通过设置时间轴盒子overflow-x: scroll;横向溢出的时候出现滚动条;(同理,制作纵向时间轴则设置overflow-y: scroll)在时间轴盒子外层再包裹一个固定大小的div,该盒子高度要比时间轴的盒子高度小20px,设置overflow:hidden,则可以隐藏掉时间轴盒子出现的滚动条;css代码:.car-time-bar{ width: 885px; ...原创 2019-08-12 10:55:53 · 4455 阅读 · 0 评论