皮蛋solo粥的博客

原创 抽稀概化算法之--------Douglas-Peucker（道格拉斯- 普克法算法）和Visvalingam-Whyatt算法

被迫卷算法的卑微前端。。。。。

原创 vue插件

。。。

原创 React 0~1

在这里复习你的react吧！

原创 clip-path制作边框滚动效果

。。。

原创 js日期倒计时组件

js日期倒计时组件

原创 react中动态生成ref进行操作

import { useRef, useState,useEffect } from 'react';import './Seven.scss';import gof from './imgs/sevenbj.png'function Seven() { const [sss, setsss] = useState(9) const refs = [] //存储ref的数组 const [ren, setRen] = useState([ { .

原创 input上传图片、音频并预览

以上是对大小类型进行一些判断，还有转foromdata数据。import { useEffect, useState } from 'react';import './index.scss'export default function Song() { const [songfiles, setSongFiles] = useState([]) const files =(e)=>{ let file = e.target.files...

原创 input上传图片，以及动态添加表单，img白边

import './App.scss';import { useState } from 'react';function getBase64(img, callback) { const reader = new FileReader(); reader.addEventListener('load', () => callback(reader.result)); reader.readAsDataURL(img);}function App() { const [b.

原创 分页显示的切换效果，加数组按给定数字分割

先安利数组切割，我是切割成每7个合成一个数组：function arrToTwoDim(arr, n = 2) {//这是函数默认参数，不传参默认按2切割var arr2 = []for (var i = 0, j = 0; i < arr.length; i += n) {arr2[j] = []for (var k = 0; k < n; k++) {if (i + k < arr.length)arr2[j].push(arr[i + k])}..

原创 3d位移轮播图

const com = () => { let len = value.length; let temp1 = ins - 2;//ins默认是0，所以给到temp3，因为temp3是中间位置显示 setp1(temp1) let temp2 = ins - 1;//-1就是中间靠左一的位置，到时候会根据这五个索引提供各自的动画位移 setp2(temp2) let temp3 = ins;// setp3(te...

原创 border渐变条

原创 弹性布局看完了，来看看grid布局咯

grid-template-rows：指定行，三个参数表示三行，然后参数值是每一行的高度grid-template-columns：指定列，五个参数表示五列，然后参数值是每一列的宽度grid-template-areas：划定网格分布，因为元素都不会很均匀，有点不规则，所以一般用这样的形式划定分割，会比较清晰。gap：指定行列间隙间距是多少。gird-area：子元素使用，大家按照名字来领取各自的领地啦！！！...

原创 react中使用sass（简单便捷）

直接运行npm i node-sass -D或者yarn add node-sass -D安装后直接把 css改成scss，不需要watch监听编译，但是要在node环境下才能用，很方便。

原创 select下拉列表的的文字提示信息

<select id='no' value={sex} onChange={e => { setSex(e.target.value); }} > ...

原创 弹出导航栏禁止滚动事件

给body增加监听事件这种方法仅仅在PC端上有效，但是在移动端失效。因此需要方法二。移动端：1、先创建一个函数：function scrmove(e){ e.preventDefault(); //阻止默认行为 e.stopPropagation(); //阻止冒泡}2、然后在遮罩层出现后增加监听事件函数：document.addEventListener("touchmove",scrmove,false);3、在遮罩层小时候去除增加的监听事件函数：doc...

原创 粗谈flex弹性布局

注意！！！！：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。不要把justify和align看成固定的水平垂直居中，他们和常规布局不一样，是根据主轴和侧轴来作用的。正常不改变的话justify-content是主轴的，那么就是水平居中，align-items: center就是垂直居中；当改变flex-direction: column上下排列，那么justify-content就是垂直居中，alig...

原创 react用map遍历生成的标签通过index添加不同的事件

{ lists1.map((e,index) => ( <div key={index}> <div> <img onMouseEnter={(e)=>{imggo(e,index)}} onMouseLeave={imglv} src={img == index ? e.imgpath1...

原创 react鼠标在当前元素的坐标offsetX,Y

<div onMouseMove={rrr} className='right'>const rrr = (e:any)=>{console.log(e.nativeEvent.offsetX)}今天做一个img跟随鼠标在某一个元素里位移，在js和vue都能取到的offsetX,Y是undifine了，我人麻了，react真是特立独行让人乱到离谱，他把offset封装在了nativeEvent里面，害得我好一顿找，...

原创 clip-path部分区域显示，hover曲线出现

.card{ clip-path: circle(5% at 10% 10%); transition: all ease-in-out .3s; background-color: red; width: 300px; height: 300px; } .card:hover{ clip-path: circ...

原创 网页圆形透明滤镜

<style> body { background: url(https://images.unsplash.com/photo-1519677100203-a0e668c92439)no-repeat center; background-size: cover; height: 100vh; cursor: none; ...

原创 图标炫酷hover

<style> /* 首先这是外部引入的i图片，要把<i>替换成<img> 然后加上src去掉calss， 其次这里的图标都是镂空的空心，才能hover出黄金色的底色切记！！！ 其实没啥特别的，就是图标镂空然后改变伪类的底色而已 */ body { margin: 0; padding...

原创 鼠标悬浮文字抬头

<style> body { margin: 0; padding: 0; background-color: #d0d0d0; position: absolute; width: 100%; height: 100%; display: -webkit-flex; ...

原创 走马灯效果的文字hover

ul li{ list-style: none; } ul li a{ position: relative; font-size: 4em; text-decoration: none; line-height: 1em; letter-spacing: 2px; text-transform: uppercase;/* 定义文字内容都是大写字母 */ ...

原创 css伪类炫酷迷幻边框

.box{ position: relative; width: 400px; height: 250px; background: linear-gradient(to top,#000,#262626); margin: 200px auto; } .box::before, .box::after{ cont...

原创 按钮点击涟漪效果

.btn{ position: relative; border: none; background: linear-gradient(to right,#33cccc,#ff99cc); width: 200px; height: 60px; font-size: 20px; letter-spacing: 2px; color: white; border-radius: 30px; box-shadow...

原创 这样的轮播图谁让人不爱啊（切片轮播图）

body { background-color: rgba(206, 182, 182, 0.637); display: flex; height: 100vh; justify-content: center; align-items: center; } .a{ position: relativ...

原创 区别一下preserve-3d和 perspective透视

相同点：他俩都写在父元素上，作用于父元素里面的所有子元素。不同点：preserve-3d：是开启3d空间，让元素脱离2d平面，让我们看起来有立体的效果。perspective：是透视效果，很多人会误以为透视就是3d，其实不是的，透视达到了远小近大的效果，从而让人误认为是3d，但这只是欺骗了你的眼睛，实际上还是2d平面，透视一般作用于所有设置了Z轴位移的子元素，譬如translateZ——transform:translateZ(600px);因为Z轴就是距离屏幕的坐标轴，所以透视是为Z轴

原创 移动端检测手指滑动做一些事情ontouchstart

<div className='fight' onTouchStart={first} onTouchEnd={fin}>start可以接受手指第一次接触屏幕的坐标end获取结束坐标并做一些事情。const first = (e)=>{setbad(e.touches[0].clientX);}const fin = (e)=>{if(badgo == 0 && bad-e.changedTouches[0].clientX >

原创 什么？想控制scroll默认滚动条的样式？

原创 js+css实现div跟随鼠标位移

body{perspective: 500px;transform-style: preserve-3d;}.box{background-color: pink;width: 500px;height: 500px;margin: 200px auto 0px;transition: all 0.8s ease;}<body> <div class="box" onmousemove="go(event)"></div..

原创 js查询是否为移动端设备

varsUserAgent=navigator.userAgent.toLowerCase();varbIsIpad=sUserAgent.match(/ipad/i)=="ipad";varbIsIphoneOs=sUserAgent.match(/iphoneos/i)=="iphoneos";varbIsMidp=sUserAgent.match(/midp/i)=="midp";varbIsUc7=sUserAge...