![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
功能模块
前端小99
一点一滴 不忘初心
心有猛虎 细嗅蔷薇
展开
-
vue实现模糊查询搜索
<bz-input size="small" class="search" v-model="value" placeholder="请输入关键字搜索" > <template v-slot:left-icon> <img class="icon" src="../../assets/img/综合查询/搜索.png" alt="" /> ...原创 2021-10-13 10:08:34 · 4551 阅读 · 0 评论 -
Vue无缝滚动
演示展示:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-defaultgithub地址https://github.com/chenxuan0000原创 2020-12-11 14:55:10 · 130 阅读 · 0 评论 -
图片预加载和懒加载的实现方法
图片预加载即提前加载图片,可保证图片快速、无缝地发布,用户需要查看时可直接从本地缓存中渲染,适用于图片占据很大比例的网站。方法1,在CSS background中加载:会增加页面的整体加载时间#preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }#preload-02 { background: url(-02.png) no-repeat -9999px -9999px; }方法2,JS new image对象原创 2020-09-14 22:19:12 · 571 阅读 · 0 评论 -
CSS动画与过渡结合 音乐播放器无限旋转 鼠标移入暂停效果
* { padding: 0; margin: 0; } ul, ol { list-style: none; } a { text-decoration: none; color: #000; } img { border-radius: 50%; border: 1px solid #000; /*调用*/ -webkit-animation:...原创 2019-03-16 21:33:07 · 750 阅读 · 0 评论 -
css3动画与过渡效果结合出现的树叶飘落效果
* { padding: 0; margin: 0; } ul, ol { list-style: none; } a { text-decoration: none; color: #000; } section { height: 600px; border-bottom: 1px solid #000; position: relative; ...原创 2019-03-16 21:29:16 · 5958 阅读 · 5 评论 -
css图片放大缩小
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>css实现鼠标移入时的放大效果</title> <style type="text/css"> div{ width: 200px; height: 300px;.原创 2020-08-28 20:29:09 · 2007 阅读 · 0 评论 -
前端随机验证码
前端随机验证码 前端登录或者注册的时候经常会有一个验证码,数字或者字母,本验证码是基于canves的。使用方法:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图形验证码</title> </head> <body> <div id="v_con.原创 2020-09-10 22:27:49 · 767 阅读 · 0 评论 -
js实现剪切
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } #box { position: relative; width: 430px; height: .原创 2020-09-07 20:42:27 · 834 阅读 · 0 评论 -
淘宝放大镜案例并且兼容ie
最近项目中想实现一个淘宝放大镜的效果 自己试了试做出来现在把这个案例的代码分享给大家 功能快方面的逻辑 1:当鼠标移入图片拖拽的小方块出现 右面的图片的出现 2:当鼠标离开图片拖拽的小方块消失 右面的图片消失 3: 获取图片在页面之间的距离 4:给拖拽的小方块定义鼠标移动事件...原创 2020-09-07 18:41:34 · 243 阅读 · 0 评论