前端
关注
分享
扫一扫
king0964
分享实例，共同前进。
展开
-
vue3+elementPlus实现列表的查询、翻页和查看功能
vue3+elementPlus实现列表的查询、翻页和查看功能原创 2023-05-08 19:30:00 · 4860 阅读 · 1 评论 -
JQ实现垂直导航功能（常用于商品类）
本文介绍利用JQ实现垂直导航功能，可点击左导航栏切换右边数据，也可滚动右边数据切换左导航栏标签，实现左右联动效果原创 2023-05-02 21:30:00 · 586 阅读 · 0 评论 -
JQ实现输入内容过滤搜索数据功能
本文介绍利用JQ实现输入内容过滤搜索数据功能（焦点过滤、空全部显示和模糊过滤等）原创 2023-05-01 19:30:00 · 230 阅读 · 0 评论 -
压缩HTML引用字体
有些网站为了凸显某部分字体，而引入自定义字体，但由于自定义字体相对都比较大（几M）,导致页面加载缓慢；所以本文介绍三种压缩字体的方法，可根据项目情况自行选择原创 2023-04-30 16:00:00 · 1325 阅读 · 0 评论 -
JQ模拟六位密码支付效果
利用JQ模拟六位密码支付效果实现过程 功能比较简单，代码如下，主要功能都有注释：body { margin: 0; padding: 0; background-color: #c7c8ca;}.pop-box { display: none;}.pop-box .mask { position: absolute; top: 0; left: 0; width: 100%; heigh...原创 2021-11-18 20:00:00 · 348 阅读 · 0 评论 -
利用echarts实现心形图片排列效果
内容简介前几天看到一篇文章，利用echarts来实现气泡龙的效果，觉得可以从这个例子衍生出使用不同背景图来实现不同排版的效果；本文介绍利用该思路实现心形图片的排列效果。实现过程实现思路分析：1、绘制本地图片到画布（ctx.drawImage）；2、获取图片的像素点（imageData）；3、根据图片的宽高和设置的间隔进行循环，当为黑色时（r + g + b == 0），就替换为设置的小图片，并把图...原创 2021-09-10 08:57:20 · 553 阅读 · 0 评论 -
JQ实现拖动选择时间段
前言概述本文介绍利用JQ实现拖动选择时间段的示例，该实例可默认显示设置的时间段、可拖动多个时间段、可伸缩时间段、可合并时间段并能导出所有时间段的详细信息，效果如下：实现过程1. 先实现页面效果，文件*.html和*.css代码如下：Tips:css代码联合效果比较好理解。<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>拖动选择时间段<原创 2020-10-19 11:07:27 · 1033 阅读 · 1 评论 -
用Vue实现购物车组件
前言本实例主要介绍利用Vue实现购物车组件，顶部可以切换标签“全部”、“好评”和“买过”的数据，标签“全部”下还可以切换不同分类显示商品；也可对商品进行加减，并进行跨标签和跨分类的最终价合计；最终效果：实现过程一. 子组件代码如下（shoppingCart.vue），原理分析：1. 切换标签函数toggleType，点击时，赋值this.currentIndex = index，同时利用计算属性更新menu的值，从而实现切换标签数据功能；而this.menuTypeIndex .原创 2020-06-10 15:34:33 · 5480 阅读 · 0 评论 -
如何实现动态表单功能
前言客户提出问题“手机端（app\小程序等）每次修改表单的字段名或者新增其它表单时，每次都需要重新审核，由于表单修改很频繁且审核时间又很长，导致程序经常使用中断，体验不好。”；根据客户的问题，总结了两种方法，都是不需要修改到手机端，所以不用经过审核。Tips：$.load(url)和iframe也能实现，但第一个要解决跨域问题，第二个需要每次更新引用的html，操作起来都不方便，这里就不做...原创 2020-04-08 17:53:22 · 9979 阅读 · 0 评论 -
echarts使用生成的自定义地图实现信息发送
简介echarts官方只提供全国地图，但是实际项目过程中，经常只需要某片区域的地图；所以本文通过实例讲解怎么生成自定义的地图，并在地图实现信息发送的效果。自定义地图自定义地图分两种，一种是直接利用网站直接生成，另一种是利用网站生成后进行修改生成定制版的地图。第一种的实现过程：1. 打开网址“http://datav.aliyun.com/tools/atlas”，显示如下图的效...原创 2020-03-26 09:42:11 · 952 阅读 · 0 评论 -
Three.js系列--实现常见例子
汇总使用Three.js实现的各种常见例子：《实例介绍Three.js辅助插件dat.GUI》--实现过程https://jingyan.baidu.com/article/95c9d20d1bbff7ec4f756157.html 《实例介绍Three.js常用的构造器、属性和方法》--实现过程https://jingyan.baidu.com/article/851fbc3776d7ff...原创 2019-12-25 09:55:54 · 1603 阅读 · 1 评论 -
Vue仿今日头条
利用Express+MongoDB+Vue实现《Vue仿今日头条》功能，效果如下图：代码顺序如下：Vue仿今日头条--服务器端--https://jingyan.baidu.com/article/6dad5075bde3bce122e36e5f.html Vue仿今日头条--后台网站文章页面--https://jingyan.baidu.com/article/86fae3...原创 2019-12-24 10:02:45 · 780 阅读 · 0 评论 -
箭头跳动动画效果和圆盘动画效果
手机端的交互体验越来越重要，因为好的体验能吸引用户的使用，提高用户的愉悦感；本文主要实现两个交互体验：箭头跳动动画效果，就是箭头一直有一个往下的动画，吸引用户下拉操作；圆盘动画效果，就是点击圆盘的文字项，圆盘会整个旋转，像拨号码的效果一样。箭头跳动动画效果html代码这一块，都是一些简单排版，详细代码可自行查看下图。本文的实例都是由css代码实现，所以这一块是本文的重点...原创 2019-04-09 15:24:34 · 1642 阅读 · 0 评论 -
网页中常用加载页面的实现原理
本文主要是来分析加载页面的实现原理，因为好的加载页面可以提高用户访问的兴趣度，也能让用户远离枯燥的等待；根据网页上各种加载页面，大概总结了下面几种比较常用的实现方法：1.利用定时器实现加载页面；2.利用readyState判断实现加载页面；3.利用滚动条+readyState判断实现加载页面；4.利用滚动条+onload实现加载页面；5.利用百分比增加+onload实现加载页面...原创 2019-04-09 15:11:01 · 5219 阅读 · 0 评论 -
实现体检动效、数据滚动条动效和加载动效
手机端的交互体验越来越重要，因为好的体验能吸引用户的使用，提高用户的愉悦感；本文主要实现三个交互体验：体验动效类似防护软件的数据校验，使校验数据的过程更生动，而不单调；数据滚动条动效是打开页面的时候，对数据显示百分比做了一个滚动条动效；加载动效有别于平时的加载动效，使加载过程更加生趣。体检动效html代码这一块，都是一些简单排版，详细代码可自行查看下图。本文的实例都...原创 2019-04-09 14:50:11 · 459 阅读 · 0 评论 -
实例介绍fullpage.js常用的配置和方法
本文通过一个简单实例介绍fullpage.js插件中经常用到的配置和方法，通过实例可以让大家更容易理解，效果如下图：第一--四屏利用回调函数afterLoad给每一屏滚动结束后增加一个动画；第五屏调用插件自带的幻灯片效果。编写静态页面html代码和css样式如下图，这一块比较简单，也不是本文重点，详细代码可自行查看下图。Tips:1.HTML的布局、I...原创 2019-03-29 11:48:18 · 1373 阅读 · 0 评论 -
Sublime Text常用快捷键和插件
Sublime Text是一个代码编辑器，也是HTML和散文先进的文本编辑器。本文通过实例来介绍项目中常用快捷键和插件的用法，熟悉快捷键和引用插件可以极大的提高我们的开发效率。sublime常用快捷键输入“html:5”后点击Tab键或输入“!”后点击Ctrl+E都能转换为html5的骨架结构，转换为的代码如下图：Tips：需安装Emmet插件； 右下角的文本类...原创 2019-03-29 08:41:53 · 983 阅读 · 0 评论 -
canvas实现涂鸦效果--橡皮檫和历史记录
利用canvas实现涂鸦效果，包括更换笔触大小颜色、换背景图、橡皮檫、历史记录、清屏等功能，并能保存涂鸦图片到本地。由于篇幅问题，本文主要实现橡皮檫和历史记录功能，该部分功能不操作背景图片，最终效果如下图。Tips：本文是在《canvas实现涂鸦效果--基本涂鸦效果》、《canvas实现涂鸦效果--大小颜色背景图》和《canvas实现涂鸦效果--清屏和保存功能》基础上添加功能。橡...原创 2019-03-28 16:56:06 · 6992 阅读 · 0 评论 -
加载网站logo高度动态变化和快捷菜单的动画效果
由于技术快速发展，静态页面已吸引不了用户眼光，所以网站增加一些动画效果，不仅可以使客户眼前一亮，也能提高体验互动；本文主要介绍加载网站logo高度动态变化和快捷菜单的动画效果，实现过程不是唯一的，只是给大家提供一种思路。加载网站logo高度动态变化现在很多网站设计都喜欢打开显示大图片，显得高端大气，但是打开后又觉得占太多地方， 不便于查看内容；所以为了达到更好的体验，就会在加载网站时候，显...原创 2019-03-29 14:55:59 · 429 阅读 · 0 评论 -
手机端顶部查询动态变化和滚动到才显示图片
手机端版面利用和性能的优化永远的重点，本文主要介绍手机端顶部查询动态变化和滚动到才显示图片，前者有利于多显示内容区域数据，后者有利于提高浏览速度，且适当的动态效果有利于用户体验互动。效果图和演示视频如下：手机端顶部查询动态变化效果说明，在往上拖动内容时候，查询文本框会慢慢往上移动，替换logo，且头部高度会慢慢缩窄；从而可以节省空间，显示更多内容。html代码和css样式如下图：...原创 2019-03-29 15:06:28 · 382 阅读 · 0 评论 -
Less基础资料
LESS是一个CSS预处理器，CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。Less安装 打开sublime：按键ctrl + shift + p，输入：Less2Css，点击后即可安装 windows下，Less2CSS对lessc.cmd有依赖...原创 2019-02-28 16:58:26 · 217 阅读 · 0 评论 -
操作栏弹出框动态效果和视差滚动
手机端的交互体验越来越重要，因为好的体验能吸引用户的使用，提高用户的愉悦感；本文主要实现两个交互体验：底部操作栏和相应弹出框的切换动态效果，切换过程避免单纯的隐藏显示（过渡过程比较生硬），改成上下滑动过程，使整个过程显得流畅；视觉滚动是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。底部操作栏和相应弹出框的切换动态效果编写静态页面，html代码和c...原创 2019-03-29 17:08:29 · 281 阅读 · 0 评论 -
js实现周历插件方法
1.兼容IE8-11、360浏览器、chrome、firefox等主流浏览器；手机端也可使用。2.添加点击前一周、后一周和高亮等功能。实现原理概述1.初始化周历原理：首先获取表示当前星期几的数字，一般是0（周日）-6（周六）currDay = d.getDay()；然后把值取负数传到方法creatWeeklyCalendar进行循环显示一周时间；for (var i = s...原创 2019-03-26 14:24:06 · 3972 阅读 · 1 评论 -
canvas实现涂鸦效果--基本涂鸦效果
用canvas实现涂鸦效果，包括更换笔触大小颜色、换背景图、橡皮檫、历史记录、清屏等功能，并能保存涂鸦图片到本地。由于篇幅问题，本文主要实现基本涂鸦效果。编写静态页面html代码和css样式如下图，这一块比较简单，也不是本文重点，可自行查看，最后效果如图1。实现原理声明变量和初始化数据，详细代码如下图，具体用途说明都已经有备注，主要分析两点：1.offCa...原创 2019-03-26 14:38:47 · 5497 阅读 · 0 评论 -
网站常用的几种动态显示信息效果
由于技术快速发展，静态页面已吸引不了用户眼光，所以网站增加一些动画效果，不仅可以使客户眼前一亮，也能提高体验互动；本文主要介绍下面五种效果：1.（效果图第一行图1）鼠标浮动到图片上面，图片慢慢透明化，同时文字和边框慢慢显示（文字上下移动动态效果，边框沿边框线显示的动态效果）；2.（效果图第一行图2）鼠标浮动到图片上面，图片慢慢放大，同时遮罩层和文字慢慢显示（文字上下移动动态效果）；3....原创 2019-04-01 10:45:10 · 2191 阅读 · 0 评论 -
购物车动效添加和svg动效提示
由于技术快速发展，静态页面已吸引不了用户眼光，所以网站增加一些动画效果，不仅可以使客户眼前一亮，也能提高体验互动；本文主要介绍下面两种效果：1.（第一图）点击加号图标，会产生一个改行图片的动画效果移动到购物车，且购物车显示添加的数量；2.（第二图）左边的图片移上去会产生一个向左边冒泡的动画效果，右边的图片移上去会产生一个多边形慢慢围起来的动画效果；购物车动效添加html代码...原创 2019-04-01 11:41:20 · 971 阅读 · 0 评论 -
canvas实现涂鸦效果--大小颜色背景图
利用canvas实现涂鸦效果，包括更换笔触大小颜色、换背景图、橡皮檫、历史记录、清屏等功能，并能保存涂鸦图片到本地。由于篇幅问题，本文主要实现更换笔触大小颜色和换背景图功能，最终效果如下图。Tips：本文是在《canvas实现涂鸦效果--基本涂鸦效果》基础上添加功能，基础功能可参考上面文章（修改了一处地方drawLine(ctx, lastCoordinate.x, lastCoordi...原创 2019-03-28 16:28:50 · 1488 阅读 · 1 评论 -
canvas实现涂鸦效果--清屏和保存功能
利用canvas实现涂鸦效果，包括更换笔触大小颜色、换背景图、橡皮檫、历史记录、清屏等功能，并能保存涂鸦图片到本地。由于篇幅问题，本文主要实现清屏和保存功能，最终效果如下图。Tips：本文是在《canvas实现涂鸦效果--基本涂鸦效果》和《canvas实现涂鸦效果--大小颜色背景图》基础上添加功能。清屏功能清屏功能比较简单，不需要增加html代码和css样式，只需要增加如下图...原创 2019-03-28 16:42:58 · 1762 阅读 · 0 评论