自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

QUX轻博客

QUX轻博客,专注前端开发领域,一键复制,快速实现各种效果!

  • 博客(254)
  • 收藏
  • 关注

原创 viewerjs图片预览插件ajax动态加载图片不出现-【已解决】

bug问题:近期公司查看图片的插件总是bug异常,领导发令更换这个“灯箱效果”,在网上像爬虫一下寻觅了好久,终于找到一个漂亮的插件:强大的jQuery图片查看器插件Viewer.js感觉技术没啥问题——咨询领导意见——领导反馈ok——开始移植——本地移植成功(开心,小问题不要慌)——移交后端大佬测试:内容页面成功实现灯箱效果,但是我们首页和列表页有个类似知乎当前页加载内容的效果,然后就卡坑了!事先声明:我用的是jquery版插件,vue版插件同样问题解决方案在底部。解决之路:捣鼓半天之后,插件

2020-11-06 09:04:28 97

原创 jquery向下滑动指定距离右侧固定悬浮指定元素

“页面向下滑动到指定位置,元素固定悬浮在指定位置”——这个功能很常见,特别是在pc页面中,几乎90%的网站都有这样的效果,那么jquery怎么实现呢?总结一个常用方法:1.css代码:.slider-zone{position: relative;}.rightScroll{position: fixed;z-index: 6636;right: calc((100% - 1200px)/2 -25px);top: 80px;width:300px}2.html代码:<div class

2020-10-20 16:26:25 23

原创 css通过a标签锚点+scroll-behavior滚动行为,丝滑实现“返回顶部”

记得有人制作“返回顶部”这个功能时,总是喜欢用js做,我之前问过他为什么不用a标签做,他说:“a标签做的过于僵硬,没有js实现的效果丝滑顺畅”…,css真的不能制作丝滑的滚动效果吗?当然不!CSS可以实现,只是你的认知不足,你可能都没有见过scroll-behavior这个标签。scroll-behavior为一个滚动框指定滚动行为。 默认auto,立即滚动;smooth ,平稳丝滑的滚动;html{scroll-behavior:smooth}在不考虑ie兼容的情况下,完全可以用a标签锚点跳转

2020-10-20 16:16:24 50

原创 H5移动端css实现向右横向滚动功能

移动端屏幕很小,为了呈现更多的内容,并占用更小的空间,但是又不能影响正常阅读,就出现了现在潮流的设计手法:十字交互法则,卡片横向无限滚动就是其诞生的排版布局之一,不过...

2020-09-21 23:27:52 21

原创 5分钟快速学会使用Swiper.js,实现轮播图各种效果!

还在全网搜各种轮播图插件效果?还在下载轮播图之后跳转样式?都2020年了,不嫌麻烦吗?swiper插件的出现,几乎快覆盖了整个前端市场了吧!简单,快速,来跟着我学,...

2020-09-21 20:30:04 16

原创 微信小程序实现向右横向滚动功能的方法

在上一篇《H5移动端css实现向右横向滚动功能》我们已经介绍过横向滚动的发展史,那么小程序也可以用h5的代码实现横向向右滚动的效果,这个方法就不再啰嗦,能实现,这篇文...

2020-09-21 08:12:20 5

原创 js/javascript函数中的apply()和call()

在ES中,函数也是是对象的一种,每个函数都包含两个属性:length和prototype,且每个函数包含两个非继承而来的方法apply()和call()。这两个方法都...

2020-09-19 22:03:05 2

原创 js/JavaScript防抖处理

为什么要js做防抖处理:当表单提交时,如果用户点击了好多次,后台很容易提交多次数据;搜索不做防抖,将请求多次数据;监听输入框输入时,如果监听值变化就请求数据的话,也会...

2020-09-19 18:30:22 3

原创 node+express解决ajax请求api接口跨域问题

我们在请求接口的时候,初级小白总是会遇到请求跨域报错问题,真的很头疼哇,这里是node+express造的接口,如果不是这种问题,你就不用往下看了! 在app....

2020-09-16 22:18:04 3

原创 node+express+mysql中api接口测试中req.body总是undefined的原因

最近再次(每次都学,过后就忘)学习node+expresss+mysql,调试接口时发现不能新增数据,或者新增数据都是undefined,然后先排除sql语句错误,...

2020-09-16 15:39:51 3

原创 CSS多背景/居中对齐/自适应方案

首先看UI小姐姐给前端的设计稿,大标题两边带了2个小翅膀,针对这样的效果,css如何实现?我来总结一下我常用的办法:1.flex布局,父盒子套三个子元素,...

2020-09-16 14:52:46 14

原创 Array数组常用方法——js/javascript

Array 对象用于在单个的变量中存储多个值,有很多方法,刻意很难记住,不记还总是忘,上笔记! 笔记代码:var arr = [1,2,3];v...

2020-09-16 14:51:02 3

原创 string字符串常用方法——js/javascript

String 对象用于处理文本(字符串),有很多方法,刻意很难记住,不记还总是忘,上笔记! 笔记代码:var txt="Hello worl...

2020-09-16 11:58:38 3

原创 js同步获取当前时间

js获取时间戳,并同步显示当前时间<p><span id="year">2020</span>年<span id="mo...

2020-09-14 23:51:38 2

原创 word-wrap/overflow-wrap 设置或检索当“内容”超过指定容器的边界时是否断行

word-wrap/overflow-wrap 设置或检索当“内容”超过指定容器的边界时是否断行。是由word-wrap演变而来,需要用其向后兼容。 nor...

2020-09-14 20:54:43 2

原创 js/JavaScript数组求和方法

记录一下JS数组求和方法:var arr = [1,2,3,4,5,6,7,8,9,10,11];var res = 0function sum(a){...

2020-09-14 20:06:18 2

原创 js/JavaScript数组随机排序

var arr = [1,2,3,4,5];function randomsort(a, b) { return Math.random()>.5 ? ...

2020-09-14 19:40:47 2

原创 word-break 设置或检索对象内文本的“字,词”内换行行为。

word-break 设置或检索对象内文本的“字,词”内换行行为。 normal:依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。 ...

2020-09-14 18:45:03 2

原创 html-静态页面之间传参的方法

页面之间传递参数一般都是后端进行处理的,根据参数加载不同数据,显示不同内容,其实前端静态页面也能实现传参,只不过安全性不是太高,但是还是很实用的,例如点击不同月份,显...

2020-09-14 15:44:48 6

原创 grid+background-attachment实现网格背景

效果: css:.container { position: absolute; width: 100%; height: 100...

2020-09-14 09:36:05 3

原创 white-space 设置或检索对象内 “空格” 的处理方式

white-space:normal | pre | nowrap | pre-wrap | pre-line normal:默认处理方式,过滤空白符,自动换行...

2020-09-14 09:07:04 6

原创 JS如何监听网络状况?

1. navigator.onLine方法监听,返回布尔值。要么在线,要么离线断网function updateOnline() { console.lo...

2020-09-10 09:44:43 3

原创 css-doodle插件初体验

官方解释:css-doodle组件将根据其内部的规则(纯CSS)生成一个div网格。您可以使用CSS轻松操纵这些单元格以提供图形模式或动画图形 插件官网:htt...

2020-09-09 21:07:00 5

原创 总结数组迭代笔记

先造一个数组:let a = [1,22,33,4,5,63,7,33]; 1. forEach() 迭代遍历后跟三个参数:值,索引,数组本身;a.for...

2020-09-08 20:33:58 2

原创 wp后台页面切换慢,打开速度慢:jquery-ui.min.css加载失败——在国外

你的wp主题后台是不是也很慢,转很久就是不切换,那就是这个文件在捣鬼:jquery-ui.min.css,我们仅需将其替换成国内的即可! 将代码复制到fucti...

2020-09-08 15:26:36 4

原创 JavaScript中for循环数组的方法

1.常规循环:通过自定义下标,依次循环出数组的值let a = [1,2,3,4,5,6,7];// 普通循环for(var i = 0;i<a.l...

2020-09-08 08:24:28 5

原创 js选择器:querySelector和querySelectorAll

1.二者区别 querySelector是单一选择器,得到的是唯一的一个元素; querySelectorAll,得到的是一个数组,所有名为“*”的集合;...

2020-09-08 02:41:17 3

原创 Qui-MinPure主题V1.0版发布——免费WP纯文章主题

Qui-MinPure是Qui-Pure的min版纯文章主题,展示博客类型,去掉了侧栏、用户这块,采用响应式布局! 主题优势: 1.基于qui-p...

2020-09-07 13:09:20 6

原创 禁用/禁止加载WP自带的jquery

wp主题自带的jquery版本比较低,兼容性强,但是很多时候我们不得不引入更高以及的js插件,就需要先禁用wp自带的jQuery插件,那么将下面的代码复制到funct...

2020-09-01 11:16:33 2

原创 wp获取文章的第一张图片作为缩略图

wp做主题的时候,懒人都不想再多点一下,为每篇文章手动添加缩略图,那么很多程序都是获取文章里面的第一张图片设置为缩略图,wp也可以这样设置,那么如何做?按照下面步骤就...

2020-09-01 03:02:37 6

原创 移除古登堡css

wp主题在使用的过程中,网站打开速度越来越慢,或者后台打开速度很慢,那就需要我们把古登堡的css给过滤掉,这样能提升一定的速度! 将下面代码复制到functio...

2020-09-01 00:21:10 2

原创 wp/wordpress移除导航自带的多余class

wp主题自带的class有一大堆,例如:nav_menu这些,都在li上,很是啰嗦,也不利于我们添加导航交互样式,那么就去掉他们!//删除Class选择器ad...

2020-08-28 19:35:20 2

原创 css3属性关于“box-sizing”的笔记

box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框,看这官方的定义,可能看不懂,不要急,看下面的例子: 我们先写2个盒子box和box1,bo...

2020-08-24 20:21:26 3

原创 TAB内容跟随标签切换的实现的三种方式

闲着无聊,总结一下tab标签切换的常用方式,各有利弊吧,我更喜欢jquery的方式实现,比较原生js写起来太吃力了,等会还要总结一下原生js操作class属性的方法,...

2020-08-24 19:28:22 5

原创 css3过渡transition笔记

transition属性值: 1.transition-property——规定应用过渡的 CSS 属性的名称。 2.transition-duration—...

2020-08-24 07:04:25 3

原创 html5利用outline实现双边框效果

outline在元素外绘制线框,和border很像,css公式都一样,但是“轮廓线不会占据空间,也不一定是矩形”,例如下图的红色outline线遮盖了下面box1的部分背...

2020-08-24 02:21:52 10

原创 swiper插件渲染过快导致列表高度显示不完整被隐藏的问题

swiper.js插件渲染过快导致高度被折叠,而此时swiper-wrapper高度被插件动态计算了高度,因此部分列表被隐藏,就出现下面这样的效果!此bug可以将网速...

2020-08-15 04:07:22 9

原创 输入框选择历史记录后修改输入框的背景色和字体颜色

选择输入框历史记录后的输入框的背景色和字体颜色的方法input::-webkit-autofill { -webkit-box-shadow: 0 0 0...

2020-08-14 04:03:44 10

原创 js实现点击按钮复制目标内容

网站中很多地方用到点击复制的效果,例如,点击复制pre的代码块,点击复制链接,点击复制淘宝代码,相信很多人都用过或者见过,那么今天分享一个js实现点击复制到剪切板的功...

2020-08-13 07:45:53 3

原创 记录一次手机端vw/vh单位兼容PC电脑端的心酸历程!

项目最初给的意见是,pc一套前端代码,wap一套代码,并没有说手机端在电脑上打开正常显示的需求。因此,我最后移动端单位用了vw/vh进行布局,没想到的是,需求变了,噩...

2020-08-13 04:04:41 8

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除