![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML+CSS
sparrow_girl
这个作者很懒,什么都没留下…
展开
-
自制简易视频播放器
HTML结构: <video src="./1.mp4" id="video"></video> <!-- 视频控件 --> <div class="playBox"> <!-- 播放/暂停按钮 --> <span id="btn"></span> <!-- 进度条 --> <div class="progress"原创 2021-09-27 12:51:07 · 527 阅读 · 0 评论 -
图片跟随鼠标移动
原理1、鼠标不断地移动,使用鼠标移动事件:mousemove2、在页面中移动,给document注册事件3、图片要移动距离,而且不占位置(开绝对定位)4、核心原理:每次鼠标移动,我们都会获得最新的鼠标坐标,把这个x,y坐标作为图片的top和left值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <styl原创 2021-09-22 23:05:48 · 162 阅读 · 0 评论 -
移动端搜索记录(关于本地存储)
功能一:点击搜索进行用户输入数据存到本地1、给btn注册点击事件2、在事件中,获取用户输入的值3、获取本地数据(如:searchList为例) 有数据: 1)获取到数据(字符串对象),并转换成真对象 --->数据格式:[1,2,3,.....] 2)把用户输入的值添加到对象中 3)把对象转成字符串对象 4)把字符串对象保存到本地数据中 没有数据 1)定义空数据来保存数据 2)把用户输入的值添加到对象中 3)把对...原创 2021-09-18 21:43:14 · 417 阅读 · 0 评论 -
表单全选与取消全选
分析:1、全选和取消全选:让下方所有复选框的checked属性(选中状态)跟随全选按钮2、下方的所有复选框选中全选按钮才选中,其中一个不选中全选按钮都不选中每次点击下面的某个复选框都要循环检查下方复选框是否都被选中flag保存全选按钮的选中状态HTML结构:<table border="1" cellspacing="" cellpadding="0"> <tr> <th><input type=...原创 2021-09-10 14:17:18 · 1445 阅读 · 0 评论 -
网页中楼层跳转功能
原理:点击哪一个li,找到相应的楼层内容(为每个楼层内容设置一个.floor类)把当前楼层对应到顶部的距离设置到滚动条上步骤:1、获取点击元素(li)的索引2、获取当前楼层(.floor)距离顶部的距离3、将获取到的距离设置到滚动条上<div id="floorBox"> <p>楼层导航</p> <ul> <li> <span>狗狗主粮</s原创 2021-09-10 09:25:33 · 355 阅读 · 0 评论 -
纯js实现轮播图
HTML部分: <div id="wrapper"> <ul id="slideBox" style="left: 0;"> <li><img src="img/A.jpg"></li> <li><img src="img/B.jpg"></li> <li><img src="img/C.jpg"></li> <l原创 2021-08-30 23:20:52 · 77 阅读 · 0 评论 -
选项卡功能模块
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选项卡</title> <style type="text/css"> /* 清除默认样式 */ ul,li{ padding: 0; margin: 0; } ul{ list-style: none; } #wrapper{ .原创 2021-08-27 21:59:39 · 77 阅读 · 0 评论 -
返回顶部功能模块
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>返回顶部</title> <style type="text/css"> body{ height: 2000px; position: relative; } #box{ width: 50px; height: 50px; lin.原创 2021-08-27 19:25:45 · 114 阅读 · 0 评论 -
商品分类二级菜单(HTML+CSS+JS)
难点:压线效果的处理(元素的层级要分清)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul,li,p{ padding: 0; margin: 0; } ul{ list-style: none; } a{原创 2021-08-27 19:05:50 · 1176 阅读 · 0 评论 -
下拉二级菜单的两种实现方式(html+css)
方式一:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl原创 2021-08-27 18:33:52 · 780 阅读 · 0 评论