js插件
关注
分享
扫一扫
web前端小龚
都是干货
展开
-
虚拟滚动实现(Vue)
欢迎点击: 个人官网博客.项目列表数据越来越多(上万条)，正常列表可以分页，但是像下拉框之类组件就不能分页。每次都要加载所有的(很慢)，性能不好的浏览器特别卡顿。虚拟滚动的技术完美解决。主要用于无法使用分页功能的长列表首屏加载速度慢问题，DOM加载过多“无用”元素。上效果图：核心：元素监听scroll事件计算可视化高度一次能装几个列表，然后从总数据中进行slice截取每一次滚动后根据scrollTop值获取一个可以整除itemH结果进行偏移上代码，可直接复制运行<!D原创 2021-06-22 10:11:30 · 10738 阅读 · 26 评论 -
移动端预览PDF及转成图片保存
欢迎点击: 个人官网博客移动端预览PDF及转化为图片保存一、iframe标签预览pdf二、vue-pdf 预览pdf(可自行封装弹出等效果)1.下载依赖包2.1上下滑动式2.3分页式三、pdf.js(可预览可下载) 将pdf--->canvas--->图片由于微信中苹果限制，是无法保存下载pdf文件的，安卓可以（会自动跳转到系统自带浏览器下载）。但是为了让用户能保存pdf，就只有改需求将其转化为图片，图片在微信是不受限制可以保存的。一、iframe标签预览pdf<iframe原创 2021-06-02 16:14:36 · 6184 阅读 · 5 评论 -
解决js计算精度问题BigNumber.js
欢迎点击: 个人官网博客JavaScript存在计算的精度问题，所以直接计算就可能会导致各种各样的bug，像一些加减乘除的前端计算。为什么JavaScript会有精度问题？因为JavaScript中所有的数字（包括整数和小数）都只有一种类型–Number。它的实现遵循IEEE 754标准，使用64位固定长度来表示，也就是标准的double双精度浮点数。它的优点是可以归一化处理整数和小数，节省储存空间。而实际计算的时候会转换成二进制计算再转成十进制。进制转换之后会很长，舍去一部分，计算再转回来，就原创 2021-03-18 10:27:29 · 8565 阅读 · 3 评论 -
纯前端html导出pdf(jsPDF.js)-分页-不分页
欢迎点击: 个人官网博客基础效果图：demo源码使用html2canvas自动分页效果图：demo源码一、基础：1.先引入几个文件<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"&g原创 2021-03-17 15:53:50 · 8443 阅读 · 0 评论 -
RSA加密jsencrypt.js
欢迎点击: 个人官网博客先上效果图(demo源码) <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://passport.cnblogs.com/scripts/jsencrypt.min.js"></script>使用公钥加密数据，使用私钥解密数据（常用）使用jsencrypt对数据进行RSA公钥加密：var encr原创 2021-03-17 09:39:07 · 6548 阅读 · 0 评论 -
js常用插件(十五)之基于vue的城市选择插件cityChoice.js
js常用插件(十五)之基于vue的城市选择插件cityChoice.js欢迎点击: 个人官网博客效果图：cityChoice.jsAnimate.cssstyle.css(cityChoice.css)使用方法(非常简单)：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta nam原创 2021-03-09 16:28:42 · 1139 阅读 · 0 评论 -
js常用插件(十四)之视差效果stellar.js
js常用插件(十四)之视差效果stellar.js欢迎点击: 个人官网博客jsignature.js原创 2021-02-25 10:28:31 · 1052 阅读 · 0 评论 -
js常用插件(十三)之可拖动、调整大小的Vue栅格布局组件vue-grid-layout
js常用插件之可拖动、调整大小的Vue栅格布局组件–桌面布局vue-grid-layout欢迎点击: 个人官网博客老样子，先上效果图先下载npm install vue-grid-layout --save代码demo<template> <div class="board" style="width: 50%"> <div class="home"> <grid-layout :layout="layoutD原创 2021-02-22 16:43:27 · 2902 阅读 · 0 评论 -
js常用插件(十二)之手写签名jsignature.js
js常用插件之手写签名jsignature.js欢迎点击: 个人官网博客jsignature.js先上效果图:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.1/jquery.min.原创 2021-02-07 16:29:28 · 4383 阅读 · 0 评论 -
js常用插件(十一)之图片裁剪cropper.js
js常用插件(一)之移动端调试利器VConsole—教程链接js常用插件(二)之移动端手势利器hammer单双指操作—教程链接js常用插件(三)之html2canvas生成海报(jcanvas后续出)—教程链接js常用插件(四)之jsonExportExcel导出表格(后台系统必备)–教程链接js常用插件(五)之vue-clipboard2复制粘贴–教程链接js常用插件(六)之qrcode生成二维码–教程链接js常用插件(七)之conversion压缩图片(重点:不改变图片尺寸大小)–教程链接.原创 2021-02-07 15:21:10 · 1616 阅读 · 0 评论 -
js常用插件(十)之移动端-省市区多级联动mobileSelect.js
js常用插件之省市区多级联动mobileSelect.js欢迎点击: 个人官网博客mobileSelect.jsmobileSelect.css代码demo<!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>mobileSelect Demo</title> <meta name="renderer" c原创 2021-02-01 10:41:59 · 1769 阅读 · 0 评论 -
js常用插件(九)之移动端翻书效果turn.js
js常用插件之turn.js—modernizr翻书效果欢迎点击: 个人官网博客首先引入必要的三个文件 <link rel="stylesheet" href="./css/basic.css"> <script src="./js/modernizr.2.5.3.min.js"></script> <script src="./js/turn.js"></script>turn.jsmodernizr.2.5原创 2021-02-01 10:30:36 · 2413 阅读 · 1 评论 -
js常用插件(八)之移动端滑动插件swiper，BScroll
js常用插件之移动端滑动插件swiper，BScroll这两个插件作为移动端滑动事件的扛把子，强烈建议看官方文档，更详细BScroll案例<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0原创 2021-01-13 15:35:09 · 814 阅读 · 0 评论 -
js常用插件(七)之conversion压缩图片(不改变图片尺寸大小)
js常用插件之conversion压缩图片(重点：不改变尺寸大小)欢迎点击: 个人官网博客图片压缩只是他的一种功能,更多可以查看官方文档用法很简单：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-01-13 15:15:57 · 1963 阅读 · 0 评论 -
js常用插件(六)之qrcode生成二维码
js常用插件之qrcode生成二维码欢迎点击: 个人官网博客先引用cdn或自己下载下来<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>具体使用方法也很简单<div id="qrcode"></div> qrcode() { document.getElementById('qrcode').in原创 2021-01-13 15:02:30 · 1617 阅读 · 0 评论 -
js常用插件(五)之vue-clipboard2复制粘贴
js常用插件之vue-clipboard2复制粘贴欢迎点击: 个人官网博客使用方法简单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g原创 2021-01-13 14:54:08 · 641 阅读 · 1 评论 -
js常用插件(四)之jsonExportExcel导出表格(后台系统必备)
js常用插件之jsonExportExcel导出表格(后台系统必备)欢迎点击: 个人官网博客代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<原创 2021-01-13 14:27:39 · 1971 阅读 · 1 评论 -
js常用插件(三)之html2canvas生成海报
js常用插件之html2canvas生成海报欢迎点击: 个人官网博客移动端手势利器：先引用cdn或自己下载下来<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>使用方法: <body> <button onclick="createPoster()">生成海报</button&原创 2021-01-13 14:20:09 · 1638 阅读 · 0 评论 -
js常用插件(二)之移动端手势利器hammer单双指操作
js常用插件之hammer单双指操作欢迎点击: 个人官网博客移动端手势利器：先引用cdn或自己下载下来<script src="https://cdn.bootcdn.net/ajax/libs/hammer.js/2.0.8/hammer.js"></script>使用方法 //要操作的元素 var hammertime= new Hammer(document.getElementById('test')); //直接调用就可以 //比如写了pan就原创 2021-01-13 11:51:15 · 3825 阅读 · 1 评论 -
js常用插件(一)之移动端调试利器VConsole
js常用插件之VConsole欢迎点击: 个人官网博客移动端调试利器：具体使用方法也很简单<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script><script type="text/javascript"> let vConsole = new VConsole();</script>网页中会出现vconsole调原创 2021-01-13 11:33:59 · 851 阅读 · 0 评论