- 博客(49)
- 收藏
- 关注
RSS订阅原创 swiper居中且左右不留白
swiper在不循环的情况下居中，同时左右不留白主要适用于有多个swiper需要切换，如发展历程中每个年份对应不同swiper，点击年份需要切换对应swiper
2024-12-31 11:04:02
418
原创 javascript：复制粘贴功能
第一种方式复制后页面中出现可编辑区域，介意的可以选择第二种方式。javascritp复制粘贴。//进行复制到剪切板。//进行复制到剪切板。
2024-05-17 18:01:59
812
1
原创 react项目的搭建与启动
react项目的搭建与启动准备工作（环境的搭建）二级目录三级目录准备工作（环境的搭建）（已经准备好的这一步可以跳过）1.安装Node.js（安装一直选择下一步就行）npm常用命令二级目录三级目录...
2021-12-14 14:56:03
9307
原创 jQuery侧边栏滚动固定跟随
jQuery侧边栏滚动固定跟随效果演示：注意：需要引用jQuery和对应的js,有的代码之前发过就没在重复写，后面有附链接地址。1.banner轮播代码：swiper轮播地址2.onload页面加载完成后执行，如果不加高度获取可能会不准确HTML代码：<!-- scroll01wrap --><div class="scroll01wrap"> <div class="scroll01"> <div class="scrolltext"&g
2021-09-22 17:52:06
892
原创 swiper轮播图多个分页
swiper轮播图多个分页演示效果：注意：要引入jQuery和swiper插件，这边用的版本是（Swiper 4.4.2）效果图：HTML代码：<div class="bannerwrap"> <div class="swiper-container bannerswiper"> <div class="swiper-wrapper"> <div class="swiper-slide centerBig"> <div
2021-09-22 17:17:38
1587
原创 jQuery增删改查
jQuery增删改查（图书管理）演示效果：HTML代码：<div class="books"> <h3 class="titl">图书管理</h3> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th><input type="checkbox" id="all" /></th> <th>作者
2021-09-07 17:42:37
2271
7
原创 jQuery全选，全不选判断
jQuery全选，全不选演示效果：HTML代码<div class="books"> <h3 class="titl">图书管理</h3> <table cellspacing="0" cellpadding="0"> <thead> <tr> <th><input type="checkbox" id="all" /></th> <th>作者</
2021-08-16 14:46:12
467
原创 canvas动态画圆和数字滚动进度条
canvas动态画圆效果演示：使用插件：circleChart.min.js!function(a){"use strict";a.fn.circleChart=function(b){const c={color:"#3459eb",backgroundColor:"#e6e6e6",background:!0,speed:2e3,widthRatio:.2,value:66,unit:"percent",counterclockwise:!1,size:110,startAngle:0,anima
2021-08-13 15:38:18
587
原创 jQuery蒙层框鼠标横向跟随
jQuery蒙层框横向跟随演示效果：HTML代码：<div class="followList"> <div class="item"> <img src="img/img10.jpg" /> </div> <div class="item"> <img src="img/img13.jpg" /> </div> <div class="item"> <img src="img/
2021-07-29 17:12:47
265
原创 vue图片无缝轮播/切换
vue图片无缝轮播/切换演示效果：HTML代码：<!-- vueswiper --><div class="vueswiperwrap"> <div class="vueswiper"> <div class="item" v-for="i in imgArr" :transition="need" v-show="index==$index?true:false"> <img :src="i" @click="bling()" /&
2021-06-29 14:48:03
2469
2
原创 css文字循环滚动效果
css文字循环滚动效果演示效果：HTML代码：<!-- css文字循环滚动 --><div class="rollfontbg" aos="fade-up"> <span>I’ll think of you every step of the way I’ll think of you every step of the way</span></div>css样式：/* css文字循环滚动 */.rollfontbg{posit
2021-06-22 16:31:54
963
原创 css斜切角、切边
纯css斜切角、切边样式图：HTML代码：<div class="cutwrap"> <div class="cut" aos="fade-right"> <h3>宫崎骏</h3> <h4>千与千寻</h4> <p>再漫长的故事，也有完结的时候；<br> 行驶的再慢的列车，也有一个又一个的站台；<br> 再亲密无间的旅伴，也有分开的时候。</p> </
2021-06-22 16:13:04
1913
原创 HTML引用高德英文地图
HTML高德英文地图引用<div class="map01wrap"> <h3 class="maptl">高德英文地图引用</h3> <div id="dituContent01" class="map"></div> <script src="https://webapi.amap.com/maps?v=1.4.11&key=e22196035aaa10db3b0b6eb1ab64619e"></script
2021-06-22 15:50:24
1370
1
原创 jQuery点击查看更多，列表陆续显示
jQuery点击查看更多图片演示效果：HTML代码：<div class="gallerywrap"> <div class="gallerytl gallery-icont"> <h3>《千与千寻》</h3> <h4>再漫长的故事，也有完结的时候；行驶的再慢的列车，也有一个又一个的站台；再亲密无间的旅伴，也有分开的时候。<br>旅途上经历的事情，可能会被我们遗忘；旅途上学到的东西，我们却会将它记在心间。</h4&
2021-06-22 15:11:41
1893
1
原创 jQuery图文自动循环+点击切换
jQuery实现图文自动切换和点击切换效果演示HTML：<div class="imgswitchwrap"> <div class="imgswitch"> <div class="imgswitchlink"> <a href="javascript:;" class="active"><font>01</font>千与千寻</a> <a href="javascript:;"><
2021-06-10 14:52:18
1073
2
原创 jQuery数字滚动加载特效插件
jQuery常用数字滚动加载效果，countUp.js效果演示：代码片段：jQuery：插件地址：countUp.js<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script src="js/countup.js" type="text/javascript" charset="utf-8"></script><script>
2021-06-10 11:03:37
1029
原创 jQuery实现简单的弹幕效果
jQuery实现简单的弹幕效果效果演示HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>弹幕dome</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> <script type="text/javascript" src=
2021-05-11 17:54:59
2028
原创 HTML，JS信息表单注册，点击获取验证码
HTML，JS信息表单注册，点击获取验证码效果图效果演示HTML代码<div class="modal_content"> <h5>绑定手机号</h5> <div> <label for="phone1">注册手机号：</label><br /> <input id="phone1" type="text" autocomplete="off" placeholder="请输入手机号"/>
2021-05-07 15:11:28
2926
5
原创 HTML，js自制MP3音频播放器
HTML，js自制音频播放器示意图演示效果文件结构HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>音频播放器</title> <style type="text/css"> a{text-decoration: none;display: block;width: 50px;height: 30px;ba
2021-05-07 14:04:09
659
原创 Vue改变背景色
Vue改变背景色效果图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.min.js" ></script> </head> <body> <!--自定义属性传参--> 背景
2021-05-06 18:04:04
395
原创 css 文字倒影效果
文字倒影效果css样式h2{ margin: 0; padding: 0; font-size: 100px; text-align: center; color: #f00; text-shadow: 5px 5px 5px #999999; -webkit-box-reflect: below 0px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.05) 70%,rgba(250,250,250,0
2021-04-22 16:14:32
1263
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人