![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
案例
文章平均质量分 72
喵_美
这个作者很懒,什么都没留下…
展开
-
拖拽上传(预览图片)
/创建一个url的blob ,在当前会话下生效,不像base64那样在哪里都能用,如在浏览器中用,当你关掉浏览器再开浏览器用则不生效,是一种临时文件。/* 触发file类型的Input上传文件不一定要点击上传按钮,点在Input身上即可 */点击+上传图片,或直接拖拽图片到红色方框里面也可上传图片,上传后预览图片。//拿到input当前上传的文件,拿不到url,想在页面展示必须有url。//通过FileReader的result可以拿到文件的url。//生成一个临时地址blob,不可持续。原创 2024-07-18 14:29:38 · 548 阅读 · 0 评论 -
读取文件进度条
/如果不清除,当多次提交时,后面重新选择的提交文件,提交时有可能还是上一次选择的文件,用于防范此类bug。//清楚方法:在上传等操作回调中把file input的 类型进行一次切换 用于清空里面的files存留。//一般不放在onload里面,一般用于ajax上传表单,回调完成时再清空。//为了保证安全,建议每次上传结束要清理input文件。//文件转化为 Base64。原创 2024-07-18 12:36:32 · 272 阅读 · 0 评论 -
前端常见功能案例实现
padding: 0;left: 0;right: 0;.bar {浔阳江头夜送客,枫叶荻花秋瑟瑟。主人下马客在船,举酒欲饮无管弦。醉不成欢惨将别,别时茫茫江浸月。忽闻水上琵琶声,主人忘归客不发。寻声暗问弹者谁,琵琶声停欲语迟。移船相近邀相见,添酒回灯重开宴。原创 2024-07-09 15:32:54 · 267 阅读 · 0 评论 -
自定义video
需求播放暂停切换播放进度条反馈和控制 (拖拽 点击) 播放时间 00:00/05:30音量调控 反馈 一键静音/取消静音全屏播放 循环模式播放状态反馈 未播放 已播放 播放完毕本地存储播放时间 自动续播准备 [ { 方法:[ play(),pause()], 属性: [paused], element:[#contr-play] },{ 方法:[原创 2024-07-17 15:01:08 · 701 阅读 · 0 评论 -
js吸顶导航
吸顶导航当我们浏览页面篇幅较大,浏览过半的时候想回到导航位置,只能通过往回滚动或通过”回到顶部”重新滚动到导航位置,这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式,吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前,为用户提供了极大的便利与交互体验。吸顶导航栏的初始位置一般是靠近在页面的顶部位置,但是又存在一定距离,通常这块区域放置最为醒目或者重要元素的地方,如Banner图。当页面向下滚动时超过了吸顶导航的初始位置时,需要把吸顶导航栏固定在窗口顶部原创 2024-07-09 12:44:42 · 549 阅读 · 0 评论 -
js实现移动蒙版层
可在整个页面拖动方块,但方块不能超出页面。原创 2024-07-09 12:00:37 · 152 阅读 · 0 评论 -
js碰撞检测
碰撞检测碰撞检测(边界检测)在前端游戏,以及涉及拖拽交互的场景应用十分广泛。碰撞,顾名思义,就是两个物体碰撞在了一起,眼睛是可以直观的观察到碰撞的发生。但对于前端实现,如何让 JavaScript 代码理解两个独立的“物体”(DOM)碰撞在一起呢。这就涉及到碰撞检测(或者叫边界检测)的问题了。两个矩形块的碰撞:判断任意两个(水平)矩形的任意一边是否有间距,从而得之两个矩形块有没有发生碰撞。具体实现方式,可以选定一个矩形为参照物,计算另一矩形的与自己相近的边是否发生重合现象。若四边均未发生重合,则原创 2024-07-09 11:56:29 · 307 阅读 · 0 评论 -
楼梯导航案例
/true 与浏览器对其 false 居中。原创 2024-07-09 10:26:41 · 323 阅读 · 0 评论 -
放大镜案例
/ 展示比例 (展示区图片宽度 - 展示区宽度) / (预览区宽度 - 遮罩层宽度)原创 2024-07-08 16:21:36 · 774 阅读 · 0 评论 -
旋转木马案例
旋转木马如果接口需要的数据格式和原始数据提供的格式有差异不要去改接口方法 也不要改原始数据做一层中间件(数据处理函数/方法)<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2024-07-08 16:16:30 · 785 阅读 · 0 评论 -
轮播图案例
丐版轮播图<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 基础轮播图 banner 移入移出</title> <style> * { m原创 2024-07-08 16:05:50 · 556 阅读 · 0 评论 -
选项卡切换(排他法、轮转法、轮转法之事件委托)
tabbar content 两部分的内容一一对应,我们点击某一个tab的时候,该tab的类名设置为on,其他的tab要清除on类名,对应的content的类名要设置为 active ,其他的content清除active类名。// aTab[i].onclick = function () { //循环绑定事件耗资源,优化事件委托。//方法三:轮转法之事件委托优化 通过监听父元素的点击事件,找到点击的子元素下标。//触发事件的DOM目标。原创 2024-07-08 16:04:40 · 674 阅读 · 0 评论 -
导航图片固定高度居中显示小技巧
需求:导航图居中,宽度自适应高度不随屏宽减小而减小,图片不会变小。1.制作背景图,两边足够长,如下2.代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .te...原创 2019-07-27 16:45:11 · 240 阅读 · 0 评论 -
不同屏幕大小引用不同的背景图
jQuery的data()方法$element.data()是一个函数 ,专门用于取元素上的自定义属性(data-abc), 函数的参数是我们要取得属性名称(abc)。需求:大屏幕的时候使用大图,图片高度不变图片内容居中;小屏幕的时候使用小图,图片宽度100%自适应;<!DOCTYPE html><html lang="en"><head> &...原创 2019-07-27 19:56:18 · 464 阅读 · 0 评论 -
巧妙利用+号选择器作分割线
巧妙利用+号选择器作分割线+号选择器,即相邻兄弟选择器,可选择紧接在另一元素后的元素,且二者有相同父元素。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> ul >...原创 2019-07-27 15:27:51 · 171 阅读 · 0 评论 -
加载更多
<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> /* 正在加载公共样式 */ .loadmore {...原创 2019-06-26 21:00:43 · 302 阅读 · 0 评论 -
鼠标放上显示透明盒子案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> a { display: block; width: 448px; height: 252px; ma...原创 2019-05-15 21:45:21 · 469 阅读 · 0 评论 -
溢出文字用省略号表示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { padding: 30px;...原创 2019-05-15 22:09:35 · 250 阅读 · 0 评论 -
滑动门原理
滑动门出现的背景制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋办?为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。核心技术核心技术就是利用CSS精...原创 2019-05-15 23:08:30 · 1676 阅读 · 0 评论 -
列表四周去边框案例
需求:该列表四周无边框html <div class="a clearfix"> <ul class="clearfix"> <li></li> <li></li> <li></li> <li></li&...原创 2019-05-15 23:54:17 · 124 阅读 · 0 评论 -
搜索自动提示案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; ...原创 2019-05-24 17:17:08 · 230 阅读 · 0 评论 -
文字和盒子对齐
实现文字和粉色盒子对齐:该方法适合调整文字前面图标的位置,图标放在盒子内,可用背景图或图片的形式。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { ...原创 2019-05-17 11:14:27 · 1981 阅读 · 0 评论 -
简体字转繁体字案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> // 简繁体转换(见备注资料) var arr = ["你=伱", "说=詤", "我=莪",...原创 2019-05-22 16:52:10 · 661 阅读 · 1 评论 -
英语词典案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> var obj={ "abandonment":"n.放弃", "abbreviat...原创 2019-05-22 16:54:14 · 241 阅读 · 0 评论 -
tab切换案例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { ...原创 2019-05-23 13:46:11 · 497 阅读 · 0 评论 -
全选和全不选案例
需求:菜名全勾选了,那么顶上的框也自动勾选,只要有一个勾没选上,上面的框就取消勾选点击全选,菜名有一个没勾的话,就全勾上,全勾上的话,就全部取消勾选<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> ...原创 2019-05-23 15:28:45 · 605 阅读 · 0 评论 -
盒子效果案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { width: 200px; height: 200px; transition: all 1...原创 2019-05-14 21:44:16 · 339 阅读 · 0 评论