随笔分类 -  Wbe APIs

摘要:mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover,它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发,经过子盒子还会触发。mouseenter 只会经过自身盒子触发 之所以这样,就是因为mouseente 阅读全文
posted @ 2020-10-13 11:17 清出于兰 阅读(130) 评论(0) 推荐(0) 编辑
摘要:动画函数封装 1. 动画实现原理 核心原理:通过定时器 setInterval() 不断移动盒子位置。 实现步骤: 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位,才能使用element.style.left 2. 动画 阅读全文
posted @ 2020-10-13 11:16 清出于兰 阅读(83) 评论(0) 推荐(0) 编辑
摘要:1.本地存储 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。 1.1.本地存储特性 1、数据存储在用户浏览器中 2、设置、读取方便、甚至页面刷新不丢失数据 3、容量较大,sessionS 阅读全文
posted @ 2020-10-07 23:23 清出于兰 阅读(144) 评论(0) 推荐(0) 编辑
摘要:1. 移动端常用开发插件 1.1. 什么是插件 移动端要求的是快速开发,所以我们经常会借助于一些插件来帮我完成操作,那么什么是插件呢? JS 插件是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点:它一般是为了解决某个问题而专门存在,其功能单一 阅读全文
posted @ 2020-10-07 23:19 清出于兰 阅读(634) 评论(0) 推荐(0) 编辑
摘要:1.click 延时解决方案 移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 解决方案: 1. 禁用缩放。 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 <meta name="viewport" cont 阅读全文
posted @ 2020-10-07 23:18 清出于兰 阅读(388) 评论(0) 推荐(0) 编辑
摘要:1. 触屏事件概述 移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。 阅读全文
posted @ 2020-10-06 23:17 清出于兰 阅读(132) 评论(0) 推荐(0) 编辑
摘要:1. 案例:网页轮播图 轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 3.图片播放的同时,下面小圆圈模块跟随一起变化。 4.点击小圆圈,可以播放相应图片。 5. 阅读全文
posted @ 2020-10-06 23:15 清出于兰 阅读(530) 评论(0) 推荐(0) 编辑
摘要:1. 缓动效果原理 缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来 思路: 让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。 核心算法: (目标值 - 现在的位置) / 10 做为每次移动的距离步长 停止的条件是: 让当前盒子位置等于目标位置就停止定时器 注意步长值需要取整 2. 阅读全文
posted @ 2020-10-06 23:13 清出于兰 阅读(127) 评论(0) 推荐(0) 编辑
摘要:1. 三大系列总结 他们主要用法: 1.offset系列 经常用于获得元素位置 offsetLeft offsetTop 2.client经常用于获取元素大小 clientWidth clientHeight 3.scroll 经常用于获取滚动距离 scrollTop scrollLeft 4.注意 阅读全文
posted @ 2020-10-05 23:42 清出于兰 阅读(177) 评论(0) 推荐(0) 编辑
摘要:1. scroll 概述 scroll 翻译过来就是滚动的,我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 2. 页面被卷去的头部 如果浏览器的高(或宽)度不足以显示整个页面时,会自动出现滚动条。当滚动条向下滚动时,页面上面被隐藏掉的高度,我们就称为页面被卷去的头部。 阅读全文
posted @ 2020-10-05 23:40 清出于兰 阅读(302) 评论(0) 推荐(0) 编辑
摘要:1. client概述 client 翻译过来就是客户端,我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 2. 淘宝 flexible.js 源码分析 立即执行函数 (function(){})() 或 阅读全文
posted @ 2020-10-05 23:39 清出于兰 阅读(130) 评论(0) 推荐(0) 编辑
摘要:1.1 offset 概述 offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 1.2 offset 与 style 区别 offset of 阅读全文
posted @ 2020-10-05 23:36 清出于兰 阅读(338) 评论(0) 推荐(0) 编辑
摘要:1 . JS 是单线程 JavaScript语言的一大特点就是单线程,也就是说,同-个时间只能做一件事。 这是因为Javascript这门脚本语言诞生的使命所致一JavaScript 是为处理页面中用户的交互,以吸操作DOM而诞生的。比如我们对某个DOM元素进行添加和删除操作,不能同时进行。应该先进 阅读全文
posted @ 2020-10-05 00:13 清出于兰 阅读(104) 评论(0) 推荐(0) 编辑
摘要:1. 什么是BOM BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。 BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。 BOM 缺乏标准,JavaScript 语法的标准化组织是 EC 阅读全文
posted @ 2020-10-04 23:57 清出于兰 阅读(1006) 评论(0) 推荐(0) 编辑
摘要:1 键盘事件 <script> // 常用的键盘事件 //1. keyup 按键弹起的时候触发 document.addEventListener('keyup', function() { console.log('我弹起了'); })​ //3. keypress 按键按下的时候触发 不能识别功 阅读全文
posted @ 2020-10-04 23:55 清出于兰 阅读(3099) 评论(0) 推荐(0) 编辑
摘要:1. 鼠标事件对象 2. 案例:禁止选中文字和禁止右键菜单 <body> 我是一段不愿意分享的文字 <script> // 1. contextmenu 我们可以禁用右键菜单 document.addEventListener('contextmenu', function(e) { e.preve 阅读全文
posted @ 2020-09-26 11:51 清出于兰 阅读(709) 评论(0) 推荐(0) 编辑
摘要:1. 1 注册事件(2种方式) 1.2 事件监听 addEventListener()事件监听(IE9以后支持) eventTarget . addEventListener (type, listener[, useCapture] ) eventTarget.addEventListener() 阅读全文
posted @ 2020-09-26 11:35 清出于兰 阅读(137) 评论(0) 推荐(0) 编辑
摘要:1. DOM的核心总结 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。 关于dom操作,我们主要针对于元素的操作。 阅读全文
posted @ 2020-09-26 11:22 清出于兰 阅读(157) 评论(0) 推荐(0) 编辑
摘要:1. 删除节点 node.removeChild() 方法从 node节点中删除一个子节点,返回删除的节点。 <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> // 1.获取元素 var ul = 阅读全文
posted @ 2020-09-26 11:16 清出于兰 阅读(328) 评论(0) 推荐(0) 编辑
摘要:1.操作元素 JavaScript的 DOM 操作可以改变网页内容、结构和样式,我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。(注意:这些操作都是通过元素对象的属性实现的) 2. 改变元素内容(获取或设置) innerText改变元素内容 <body> <button>显示当前系统时间 阅读全文
posted @ 2020-09-23 09:27 清出于兰 阅读(780) 评论(0) 推荐(0) 编辑

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