自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

罗小文

简单的语言描述复杂的事情

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

原创 CSS mix-blend-mode实现 Logo(图片)根据图片后面的图片颜色而变化成相反的颜色【解决logo固定后 会出现与不同板块的颜色相同导致于看不清logo的情况】

logo 随着 logo后面的板块颜色而变化成对应的翻转色。(一般用于logo 固定在某个位置 与板块重叠后看不清的情况)

2023-02-23 18:04:58 682

原创 FLEX 布局中最常用的代码

FLEX 布局中的常用代码,快速实现响应式布局效果

2023-02-17 14:10:54 171

原创 跟随鼠标坐标 从左到右改变图片的展示

jquery 实现 跟随鼠标在屏幕中的坐标 实现图片的从左到右进行改变

2022-10-13 16:16:48 154

原创 鼠标划入元素中, 元素跟随 鼠标方向变化展示3D 移动效果

Js + Css 实现- 鼠标划入元素中,元素跟随鼠标方向变化展示3D 移动效果

2022-09-22 15:42:39 340

原创 使用CSS 取消手机端 点击元素 出现的蓝色背景效果

css 取消元素聚焦背景 (手机端)

2022-09-13 16:12:20 657

原创 判断是什么手机设备访问的网页

jq 判断移动端 操作系统

2022-07-19 15:45:22 75

原创 css 禁止选中文字

css 禁止文字被选中

2022-07-13 11:31:18 328

原创 jq-颜色选择器 所见即所得

<input type="color" oninput="seget()" id="bgColor"> <p></p> <script type="text/javascript"> $('#bgColor').bind('input propertychange', function () { // console.log($(this).val()); let bgCol = $(this).val(); ..

2022-04-27 13:54:44 307

原创 Jq-实时获取Input 的值

<body> <input type="text"> <p></p></body> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"&gt

2022-04-27 11:45:48 991

原创 CSS filter 白色文案透明底图片 转换 任意颜色文字图片

<!-- 白色文案透明底图片 转换 任意颜色文字图片 --><!-- 1. 我们使用想转换的图片放入img内2. 先用filter把他转换为白色 CSS filter滤镜任意色值转换工具地址:https://www.zhangxinxu.com/sp/filter.html3. 当鼠标划入时 展示原图 取消filter属性补充:有余颜色转白色最为简单,所以不建议图片为白色然后转换其他颜色操作,图片应当是想转换的颜色,然后用代码更改操作--> <style t

2022-04-18 18:39:39 845

原创 jquery 滚动条的隐藏与展示

// html 滚动条显示 $('html').css({   "overflow-x":"auto",   "overflow-y":"auto" }); // html 滚动条隐藏 $('html').css({   "overflow-x":"hidden",   "overflow-y":"hidden" }); // 可根据自己的代码来操控滚动条的展示...

2022-04-06 11:35:28 1332

原创 jquery 实现图片预加载

<script type="text/javascript"> // 预加载 function preloadImg(list, imgs) { var def = $.Deferred(), len = list.length; $(list).each(function(i, e) { var img = new Image(); img.src = e; if (img.complete) { imgs[i] = img; len--;

2022-04-06 11:17:37 1674

原创 jquery 点击按钮 实现按下去的效果

<div class="downloadImg"> <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F01%2F91%2F58de87033fe22_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&a

2022-03-31 17:44:24 1970

原创 jquery 实现吸顶效果代码(导航)

如果滚动大于50,就改变导航的定位方式(根据窗口定位固定,距离顶部0px 吸顶,宽度100%),否则就默认(绝对定位 并与头部 70像素)$(function(){ $(window).scroll(function(){ if($(window).scrollTop()>50){ $("#nav").css({"position":"fixed","top":0,"width":"100%"}); }e

2022-02-23 10:18:37 930

原创 点击元素 出现漂浮表情包(源码)

点击 元素 出现往上漂浮表情包(可任意修改图片,如爱心等)

2021-12-20 18:12:59 2331

原创 点击出现烟雾

示意图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{ background-color: #000000; } #hi{ pos

2021-12-20 17:48:41 77

原创 body溢出空白元素解决

<style type="text/css"> html{ display: block !important; overflow: scroll; } </style>

2021-09-28 14:09:22 588

原创 删除a标签 href里特定的值

<script type="text/javascript"> // 找到需要更改的a标签 获取href var arr = $('a').attr('href'); //修改 arr内容里带有/news 的字符串(此内容是a标签的href值) var uarr = arr.replace('/news', ''); // 最后插入到a标签中 $("a").attr("href",parr); console.log(parr); </script>.

2021-09-27 16:27:11 438

原创 解决 网站404 Not Found 错误

编辑修改.htaccess文件RewriteEngine on<IfModule mod_rewrite.c>RewriteBase /RewriteCond %{REQUEST_FILENAME} !-fRewriteCond %{REQUEST_FILENAME} !-dRewriteRule . /index.php [L]</IfModule>

2021-08-12 14:41:47 8513

原创 CSS 实现 Input 的动态样式美化

展示效果:结果: 如果显示占位符,则为边框为5px的红色,表示用户未输入任何内容 如果未显示任何占位符,则为默认白色,表示用户已键入内容使用CSS 中的 :placeholder-show 伪类完成此操作。什么是 :placeholder-showCSS :placeholder-shown伪类用于确定元素是否显示占位符的对象(占位符表示input 内设置placeholder 的值),主要使用它来检查input内容是否为空。换句话说,根据用户在文本框(input,textarea)输入的内容

2021-08-03 15:06:38 1213

原创 PHP Code码生成

/** * 生成随机数 * @param $len * @return string */ public function GetRandStr($len) { $chars = array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a", "b", "c","d", "e",

2021-07-26 10:28:19 356

原创 fastadmin api 跨域、 403 问题

1、Api基类中添加header信息header("Access-Control-Allow-Methods: *");if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS'){ // 浏览器页面ajax跨域请求会请求2次, // 第一次会发送OPTIONS预请求,不进行处理,直接exit返回, // 但因为下次发送真正的请求头部有带token, // 所以这里设置允许下次请求头带token否者下次请求无法成功 header('Ac

2021-07-26 10:24:38 498

原创 swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题

swiper动态加载数据滑动失效,ajax执行后swiper.js的效果消失问题$.ajax({ type:"get", url:finalUrl, dataType:"json", success:function(data){ $("#reportList").empty(); for(var i=0;i<reportLength;i++){ var url="'"+"reportDetial.html"+l

2021-07-26 10:21:28 151

原创 CSS 2端对齐 并 居中展示

/*下面是css 样式*/selector{ text-align: justify; text-align-last: center;}

2021-06-28 14:46:25 71

原创 CSS 实现背景图片 设置响应式自适应全屏展示

img标签 设置响应式自适应全屏展示最终效果最终代码最终效果由此图可以看到无论网页缩放与放大网页都不会影响到这张图片的尺寸。在放最终代码之前注意:图片建议一定要大于显示器屏幕,建议为1000左右甚至更高。(如果是小于屏幕的情况下把图片铺满屏幕会出现图片变形的情况)最终代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport"

2021-06-21 17:08:56 1587

原创 js阻塞

js阻塞介绍需了解的东西1. 异步编程概念2. Js 单线程渲染线程和JS线程解决Js 阻塞问题介绍本文将介绍 js 阻塞的相关知识,以及解决办法需了解的东西1. 异步编程概念异步是什么?简单来说就是把要执行的东西在某个时间段内一块执行。2. Js 单线程众所周知Js 的执行是从上至下的,Js同一个时间只能做一件事。所有任务需要排队,前一个任务结束,才会执行后一个任务。 如果前一个任务耗时很长,后一个任务就会等着前面的任务执行完成再执行。渲染线程和JS线程两个任意一个在运行的时候,另

2021-04-30 16:25:02 954 2

原创 Js 延迟加载

延迟加载对于js 失效 的都可以使用延迟加载解决setTimeout(function() { 这里写代码 }, 5000); //5秒后将会执行{}括号内的代码

2021-04-29 11:55:03 81

原创 Excel 中 实现删除特定字符前面的所有内容

最终展示如下图:函数代码=RIGHT(A1,LEN(A1)-FIND(":",A1))使用流程随便选择一列,我那b1为例复制函数并回车完成

2021-04-06 14:25:17 8046

原创 jQuery 复制文本内容到剪贴板

jQuery 实现将文本复制到剪贴板

2021-04-01 11:28:01 6217 4

原创 将网页class 为 textp 的所有信息单独弄出来放在一个元素内

<body><p class="textp">这里是信息1</p><p class="textp">这里是信息2</p><p class="textp">这里是信息3</p><p class="textp">这里是信息4</p></body><script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jqu

2021-03-31 15:51:31 144

原创 jQuery 实现鼠标滚动图片 放大缩小

<!DOCTYPE html><!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script src="htt

2021-03-30 16:41:46 1207 1

原创 wordpress 无法上传 .webp 图片格式的解决方法

具体操作找到放在服务器的项目文件进行编辑,一般情况下wordpress 后台是没有权限编辑的编辑文件 /wp-includes/functions.php1. 打开function.php 文件后搜索下方字符(Ctrl+F键)‘image/jpeg’ => ‘jpg’,在下面array 内加入‘image/webp’ => ‘webp’,如下图:2. 继续搜索下方字符‘jpg|jpeg|jpe’ => ‘image/jpeg

2021-03-29 16:23:15 1342

原创 CSS 实现禁止复制某块区域文字

展示效果代码:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></

2021-03-29 09:47:28 107

原创 前端网页遇到字体溢出,需用到字体比12px 更小的解决方法

scale整体缩放transform: scale(这里填写数字,默认值为1;大于数字1 代表放大,小于1代表缩放(如0.6));可用来处理任何难以再变化尺寸的元素;<style type="text/css"> //把选中的div下元素整比例的缩放,如果元素里包含文字一并缩放,注:元素一定要有宽高,盒子元素 div{transform: scale(0.6);}</style>再随便打开一个网页F12 测试下(如下图):...

2021-03-29 09:33:58 408

原创 前端实现点击弹出视频展示模块

最终效果代码<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>点击按钮展示

2021-03-27 16:23:31 2380 3

原创 jQuery 滚动条获取(滚动某位置距离显示/隐藏元素)

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title>

2021-03-25 17:55:10 628

原创 jQuery 实现数组分组展示

jQuery 实现数组分组展示 // 创建一个对象数组 var obj = [ {'id':'1','name':'name1','age':'21'}, {'id':'2','name':'name2','age':'22'}, {'id':'3','name':'name3','age':'23'}, {'id':'4','name':'name4','age':'55'}, {'id':'5','name':'name5'

2021-03-25 17:38:30 1477

原创 jQuery 获取不到 textarea,值为空问题

使用jQuery 的val(); 获取;如:html:<textarea name="con" type="text" id="Rtest"></textarea>jq:var textarea = $("#Rtest").val();注意:一定要在html 中的textarea标签中加入 type="text" 这个属性,,不然就获取不到数据。...

2021-03-13 09:58:09 2011 6

空空如也

空空如也

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

TA关注的人

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