随笔分类 - Web APIs
摘要：随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂， 为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。 1.本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大，sessionStorage约5M
阅读全文
摘要：框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。 插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。 前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发P
阅读全文
摘要：1. 什么是插件 移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢？ JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。 以前写的ani
阅读全文
摘要：移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 解决方案： 1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 <meta name="viewport" content="user-scala
阅读全文
摘要：当页面滚动某个地方，就显示返回顶部图标，否则隐藏 点击可以返回顶部 实现代码跟pc端一致 案例分析： 滚动某个地方显示 事件：scroll页面滚动事件 如果被卷去的头部（window.pageYOffset ）大于某个数值 点击，window.scroll(0,0) 返回顶部 //返回顶部模块制作v
阅读全文
摘要：移动端轮播图功能和PC端基本一致。 功能需求： 可以自动播放图片 手指可以拖动播放轮播图 案例分析: 自动播放功能 开启定时器 移动端移动，可以使用translate 移动 想要图片优雅的移动，请添加过渡效果 // 1.获取元素var focus = document.querySelector('
阅读全文
摘要：1. 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。
阅读全文
摘要：功能需求： 鼠标经过某个小li，筋斗云跟到当前小li位置 鼠标离开这个小li ,筋斗云复原为原来的位置 鼠标点击了某个小li,筋斗云就会留在点击这个小li的位置 案例分析： 利用动画函数做动画效果 原先筋斗云的起始位置是0 鼠标经过某个小li，把当前小li的offsetLeft 位置做为目标值即可
阅读全文
摘要：带有动画的返回顶部 此时可以继续使用我们封装的动画函数 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了 页面滚动了多少，可以通过 window.pageYOffset 得到 最后是页面滚动，使用 window.scroll(x,y) //1. 获取元素 var sliderb
阅读全文
摘要：轮播图也称为焦点图，是网页中比较常见的网页特效。 功能需求： 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 3.图片播放的同时，下面小圆圈模块跟随一起变化。 4.点击小圆圈，可以播放相应图片。 5.鼠标不经过轮播图，轮播图
阅读全文
摘要：1. 动画实现原理 核心原理：通过定时器 setInterval() 不断移动盒子位置。 实现步骤： 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位，才能使用element.style.left <body> <div>
阅读全文
摘要：当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover，它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。mouseenter 只会经过自身盒子触发 之所以这样，就是因为mouseenter不会冒泡 跟mouseenter搭配鼠标离开 m
阅读全文
摘要：1. scroll 概述 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 2. 页面被卷去的头部 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。
阅读全文
摘要：1. client概述 client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 2. 淘宝 flexible.js 源码分析 立即执行函数 (function(){})() 或
阅读全文
摘要：1. offset 概述 offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置，如果父级元素都没有定位，则以body位置为准 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 2. offset
阅读全文
摘要：以下代码执行的结果是什么？ console.log(1); setTimeout(function () { console.log(3); }, 1000); console.log(2);//结果为 1 2 3 以下代码执行的结果是什么？ console.log(1); setTimeout(f
阅读全文
摘要：1. 什么是BOM BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。 BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。 BOM 缺乏标准，JavaScript 语法的标准化组织是 EC
阅读全文
摘要：1. 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); }) //3. keypress 按键按下的时候触发 不能识别
阅读全文
摘要：常用鼠标事件 1 、案例：禁止选中文字和禁止右键菜单 <body> 我是一段不愿意分享的文字 <script> // 1. contextmenu 我们可以禁用右键菜单 document.addEventListener('contextmenu', function(e) { // prevent
阅读全文
摘要：1、注册事件（2种方式） 2、事件监听 addEventListener()事件监听（IE9以后支持） eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。 该方法接收三个参数:
阅读全文
浙公网安备 33010602011771号