随笔分类 - 造轮子系列
ruoyi框架修改
摘要：修改主题色 topleft布局改为自定义topleft布局 涉及到的文件 src/settings.js，src/layout/index.vue ，src/components/TopNav ，src/layout/components/Navbar.vue 避免修改原文件，将src/compon
输入框文本选取
摘要：一、“选区”和“光标”是什么？ Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。通常由用户拖拽鼠标经过文字而产生。 Range对象表示包含节点和部分文本节点的文档片段。通过 selection 对象获得的 range 对象才是我们操作光标
两点之间连线 svg
摘要：效果图 思路： 1.通过svg绘画出 线条 和 箭头，通过 元素在页面中的位置 和 父级所在页面中的位置 的差值计算出 箭头和线的 起始坐标及结束坐标， 页面滚动则 更新元素位置并且重新绘画 核心源码： <template> <svg class="line-svg" xmlns="http://w
提示框简单封装
摘要：jQuery封装 css .myToast,.myToast{ position: fixed; top:50%; left:50%; z-index: 1000; color:#fff; text-align: center; border-radius: 0.2rem;; transform:t
模拟滚动条
摘要：模拟滚动条 【html结构】: 外框里面的class都是固定的，注意每个模块的css有些是有定位属性的 <div class="" id="ID名"> 有position:relative; 和 overflow:hiddle; 属性 <div class="scroll-content-wrap"
vue轮播
摘要：vue使用transition实现无缝轮播 直接上代码: <template> <div class="page"> <div class="carousel"> <div class="inner"> <div v-for="(item, index) in imgUrls" :key="inde
原生js实现分页缓存
摘要：前言 内容涉及知识点: 1.后台分页查询概念 2.原生ajax请求 3.闭包 接口:https://api.apiopen.top/getJoke?page=1&count=2&type=video 思路: 利用js的内存机制 , 创建一个对象缓存池 ,通过闭包保证缓存池对象不会被GC回收 ,而且能
九宫格抽奖
摘要：小demo 1 css部分: ul{ margin: 0 auto; padding: 0; width: 576px; height: 513px; border:4px solid red; font-size: 0; } li,a{ display: inline-block; width:
12行代码简单实现跑马灯文字匀速滚动
摘要：jq实现跑马灯练手小demo 你要的文字匀速滚动 *{ margin:0; padding:0; } .main{ width: 400px; height:100px; margin:100px auto; position: relative; overflow: scroll; } .main
滑弯曲弧形效果的插件-arctext.js改造
摘要：要实现以上效果 JQ插件 circletype 和 arctext都都可以 1.为何这么进行改造? 1. arctext.js 不可拓展及可调控性差 2. 代码臃肿 ,未压缩源代码三百余行 , 剔除空行及注释后也有二百余行代码 2.如何做? 将 arctext.js源代码中的核心函数提取化为己用 ,
几种拼图小游戏封装
摘要：初衷 网上找的几款js写的拼图小游戏均有问题: 有些需要jq 支持且存在拖拽过快 ,导致拼图碎片出现位置偏差的bug 移动端拼图小游戏最新改版 特色 1.原生js编写 , 无须依赖额外插件支持 2.解决拖拽过快, 拼图位置出现偏差或重叠bug 3.通过new关键字创建对象 , 并暴露配置对象进行拼图
时间格式化相关
摘要：html部分 <div class="count_down"> <div class="z_time"> <div class="clock"> 活动倒计时 </div> <div class="time"> <span class="day1">0</span> <span class="day2
JQ封装分页导航条插件
摘要：思路： 需要通过判断点击页码的情况，来分别进行html结构替换 整体代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
旋转相册与导航跟随双向绑定
摘要：头部js，转换rem function IsPC() { var userAgentInfo = navigator.userAgent; var reg = new RegExp("(Android|iPhone|SymbianOS|Windows Phone|iPad|iPod)", "ig")
呱呱乐
摘要：移动端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum
点击复制功能 封装
摘要：问题： clipboardJS插件ios系统下页面复制失败问题 需要将点击目标的节点设置为 : <textArea></textArea>才能复制成功 解决办法：自己实现点击复制封装 //定义函数 window.Clipboard = (function(window, document, navi
改良版 导航栏自动跟随
摘要：简约版2.0 无横向自动跟随 dom结构为 导航条: .nav-box //样式 : 宽高与.nav 一致, 相对定位 position:relative; .nav //样式 : display:flex;弹性盒子布局, 对li进行布局 , 设置宽高 ,设置层级z-index:7 避免被其他层级高
导航栏监听页面滚动跟随 简单封装
摘要：slide('.wedding-title', '.expo-list', 'change','.nav'); //导航条 参数:导航栏父级, 被监听元素 , 导航改变样式,导航栏 function slide(navfather, tClass, activeClass,nav) { var $n
H5拖拽事件-- 自定义创建a标签热区
摘要：有一个BUG未更正, 1.当窗口为自适应时,定位left为百分比,窗口改变大小时会存在定位偏差 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./
