随笔分类 -  Web API

摘要:1. 本地存储 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。 1.1.本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大,sessionS 阅读全文
posted @ 2020-10-05 23:18 행운의소녀 阅读(156) 评论(0) 推荐(0) 编辑
摘要:1.移动端常用开发框架 1.1. 移动端视频插件 zy.media.js 框架,顾名思义就是一套架构,它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发。 插件一般是为了解决某个问题而专门存在,其功能单一,并且比较小。 前端常用的框架 阅读全文
posted @ 2020-10-05 23:14 행운의소녀 阅读(155) 评论(0) 推荐(0) 编辑
摘要:1. 移动端常用开发插件 1.1. 什么是插件 移动端要求的是快速开发,所以我们经常会借助于一些插件来帮我完成操作,那么什么是插件呢? JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点:它一般是为了解决某个问题而专门存在,其功能单一 阅读全文
posted @ 2020-10-05 23:12 행운의소녀 阅读(114) 评论(0) 推荐(0) 编辑
摘要:click 延时解决方案 移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 解决方案: ​ 1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 <meta name="viewport" cont 阅读全文
posted @ 2020-10-05 23:08 행운의소녀 阅读(136) 评论(0) 推荐(0) 编辑
摘要:1.案例:返回顶部 当页面滚动某个地方,就显示,否则隐藏 点击可以返回顶部 2.案例分析 滚动某个地方显示 事件:scroll页面滚动事件 如果被卷去的头部(window.pageYOffset )大于某个数值 点击,window.scroll(0,0) 返回顶部 // 返回顶部模块制作 var g 阅读全文
posted @ 2020-10-05 23:05 행운의소녀 阅读(129) 评论(0) 推荐(0) 编辑
摘要:1. 移动端常见特效 1.1 案例: 移动轮播图 移动端轮播图功能和基本PC端一致。 可以自动播放图片 手指可以拖动播放轮播图 1.2. 案例分析: 自动播放功能 开启定时器 移动端移动,可以使用translate 移动 想要图片优雅的移动,请添加过渡效果 // 1. 获取元素 var focus 阅读全文
posted @ 2020-10-05 23:02 행운의소녀 阅读(181) 评论(0) 推荐(0) 编辑
摘要:1触屏事件 1.1. 触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指,也可 阅读全文
posted @ 2020-10-04 22:50 행운의소녀 阅读(103) 评论(0) 推荐(0) 编辑
摘要:案例:筋头云案例 利用动画函数做动画效果 原先筋斗云的起始位置是0 鼠标经过某个小li,把当前小li的offsetLeft 位置做为目标值即可 鼠标离开某个小li,就把目标值设为 0 如果点击了某个小li, 就把li当前的位置存储起来,做为筋斗云的起始位置 <script> window.addEv 阅读全文
posted @ 2020-10-04 22:46 행운의소녀 阅读(97) 评论(0) 推荐(0) 编辑
摘要:.案例:返回顶部 带有动画的返回顶部 此时可以继续使用我们封装的动画函数 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了 页面滚动了多少,可以通过 window.pageYOffset 得到 最后是页面滚动,使用 window.scroll(x,y) <script> // 阅读全文
posted @ 2020-10-04 22:43 행운의소녀 阅读(163) 评论(0) 推荐(0) 编辑
摘要:1. 案例:网页轮播图 轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 ​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 ​ 3.图片播放的同时,下面小圆圈模块跟随一起变化。 ​ 4.点击小圆圈,可以播放 阅读全文
posted @ 2020-10-04 22:41 행운의소녀 阅读(275) 评论(0) 推荐(0) 编辑
摘要:1.动画函数封装 1.1. 动画实现原理 核心原理:通过定时器 setInterval() 不断移动盒子位置。 实现步骤: 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位,才能使用element.style.left 1 阅读全文
posted @ 2020-10-03 22:48 행운의소녀 阅读(127) 评论(0) 推荐(0) 编辑
摘要:1.mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover,它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发 之所以这样,就是因为mouseen 阅读全文
posted @ 2020-10-03 22:42 행운의소녀 阅读(194) 评论(0) 推荐(0) 编辑
摘要:1.元素滚动 scroll 系列 1.1. scroll 概述 scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 1.2. 页面被卷去的头部 如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被 阅读全文
posted @ 2020-10-03 22:39 행운의소녀 阅读(188) 评论(0) 推荐(0) 编辑
摘要:1. 元素可视区 client 系列 1.1 client概述 client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 1.2. 淘宝 flexible.js 源码分析 立即执行 阅读全文
posted @ 2020-10-03 22:34 행운의소녀 阅读(132) 评论(0) 推荐(0) 编辑
摘要:1. 元素偏移量 offset 系列 1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 offset 系列常用属 阅读全文
posted @ 2020-10-03 22:31 행운의소녀 阅读(265) 评论(0) 推荐(0) 编辑
摘要:1. JS执行机制 以下代码执行的结果是什么? console.log(1); setTimeout(function () { console.log(3); }, 1000); console.log(2); 以下代码执行的结果是什么? console.log(1); setTimeout(fu 阅读全文
posted @ 2020-10-02 10:06 행운의소녀 阅读(94) 评论(0) 推荐(0) 编辑
摘要:1.BOM 1.1. 什么是BOM ​ BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。 ​ BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。 ​ BOM 缺乏标准,JavaScrip 阅读全文
posted @ 2020-09-30 23:35 행운의소녀 阅读(160) 评论(0) 推荐(0) 编辑
摘要:1.1常用的键盘事件 1.1键盘事件 事件除了使用鼠标触发,还可以使用键盘触发, 注意给文档 document 添加键盘事件 注意: onkeypress 和前面2个的区别是,它不识别功能键,比如左右箭头,shift 等。 三个事件的执行顺序 keydown -> keypress -> keyup 阅读全文
posted @ 2020-09-29 23:33 행운의소녀 阅读(261) 评论(0) 推荐(0) 编辑
摘要:1.常用鼠标事件 1.1 案例:禁止选中文字和禁止右键菜单 1.禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单 document.addEventListener('contextmenu', function(e) { e.prevent 阅读全文
posted @ 2020-09-29 23:23 행운의소녀 阅读(253) 评论(0) 推荐(0) 编辑
摘要:1.注册事件(2种方式) 1.1 注册事件概述 给元素添加事件,称为注册事件或者绑定事件。 注册事件有两种方式:传统方式和方法监听注册方式 传统注册方式  利用 on 开头的事件 onclick <button onclick=“alert('hi~')”></button>  btn.onc 阅读全文
posted @ 2020-09-29 23:17 행운의소녀 阅读(128) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示