冲啊！ - 博客园

201 click 延时300ms的解决方案： fastclick 插件等

摘要：移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。解决方案： 1.4.1 禁用缩放浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 1.4.2 利用touch事件自己封装这个事件解决300ms 延迟原理就阅读全文

posted @ 2020-01-15 09:53 冲啊！阅读(181) 评论(0) 推荐(0) 编辑

200 classList 属性

摘要： classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。该属性用于在元素中添加，移除及切换 CSS 类。有以下方法添加类： element.classList.add（’类名’）；移除类： element.classList.remove（’类名’）; 切换阅读全文

posted @ 2020-01-14 22:19 冲啊！阅读(122) 评论(0) 推荐(0) 编辑

0199 移动端之轮播图

该文被密码保护。阅读全文

posted @ 2020-01-14 22:18 冲啊！阅读(7) 评论(0) 推荐(0) 编辑

0198 触屏事件:touchstart、touchmove、touchend、touches、targetTouches、changedTouches

摘要： 1.3.1 触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触阅读全文

posted @ 2020-01-14 19:51 冲啊！阅读(707) 评论(0) 推荐(0) 编辑

0197 案例：筋头云

摘要： 1. 利用动画函数做动画效果 2. 原先筋斗云的起始位置是0 3. 鼠标经过某个小li，把当前小li的offsetLeft 位置做为目标值即可 4. 鼠标离开某个小li，就把目标值设为 0 5. 如果点击了某个小li，就把li当前的位置存储起来，做为筋斗云的起始位置阅读全文

posted @ 2020-01-14 13:39 冲啊！阅读(141) 评论(0) 推荐(0) 编辑

196 案例：淘宝返回顶部

摘要：返回顶部 1. 带有动画的返回顶部 2. 此时可以继续使用我们封装的动画函数 3. 只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了 4. 页面滚动了多少，可以通过 window.pageYOffset 得到 5. 最后是页面滚动，使用 window.scroll(x,y) 阅读全文

posted @ 2020-01-14 11:26 冲啊！阅读(215) 评论(0) 推荐(0) 编辑

0195 JavaScript网页轮播图，节流阀

摘要：轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求： 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 3.图片播放的同时，下面小圆圈模块跟随一起变化。 4.点击小圆圈，可以播放相应图片。 5.鼠标阅读全文

posted @ 2020-01-14 11:24 冲啊！阅读(314) 评论(0) 推荐(0) 编辑

0194 动画函数封装：动画实现原理，给不同元素记录不同定时器，缓动效果原理，多个目标值之间移动，动函数添加回调函数，动画完整版代码，京东问题反馈元素左右移动案例

摘要： 1.6.1 动画实现原理核心原理：通过定时器 setInterval() 不断移动盒子位置。实现步骤： 1. 获得盒子当前位置 2. 让盒子在当前位置加上1个移动距离 3. 利用定时器不断重复这个操作 4. 加一个结束定时器的条件 5. 注意此元素需要添加定位，才能使用element.style 阅读全文

posted @ 2020-01-13 19:47 冲啊！阅读(329) 评论(0) 推荐(0) 编辑

0193 mouseenter 和mouseover的区别

摘要：当鼠标移动到元素上时就会触发mouseenter 事件类似 mouseover，它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发。 mouseenter 只会经过自身盒子触发。之所以这样，就是因为mouseenter不会冒泡跟mouseenter搭配鼠标阅读全文

posted @ 2020-01-13 16:08 冲啊！阅读(174) 评论(0) 推荐(0) 编辑

0192 offset、client、scroll 三大系列总结

摘要：他们主要用法： 1.offset系列经常用于获得元素位置 offsetLeft offsetTop 2.client经常用于获取元素大小 clientWidth clientHeight 3.scroll 经常用于获取滚动距离 scrollTop scrollLeft 4.注意页面滚动的距离通过阅读全文

posted @ 2020-01-13 15:57 冲啊！阅读(159) 评论(0) 推荐(0) 编辑

0191 元素滚动 scroll 系列：scrollTop，scrollLeft，scrollWidth，scrollHeight，window.pageYOffset

摘要： 1.3.1 scroll 概述 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 1.3.2 页面被卷去的头部如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被阅读全文

posted @ 2020-01-13 12:25 冲啊！阅读(508) 评论(0) 推荐(0) 编辑

0190 元素可视区 client 系列：clientTop，clientLeft，clientWidth，offsetHeight，淘宝 flexible.js 源码分析

摘要： 1.2.1 client概述 client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 1.2.2. 淘宝 flexible.js 源码分析立即执行函数 (function() 阅读全文

posted @ 2020-01-13 10:34 冲啊！阅读(250) 评论(0) 推荐(0) 编辑

0189 案例：仿京东放大镜效果

摘要： 1.1.6 案例：仿京东放大镜整个案例可以分为三个功能模块鼠标经过小图片盒子，黄色的遮挡层和大图片盒子显示，离开隐藏2个盒子功能黄色的遮挡层跟随鼠标功能。移动黄色遮挡层，大图片跟随移动功能。 1.1.7 案例分析黄色的遮挡层跟随鼠标功能。把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父阅读全文

posted @ 2020-01-12 21:22 冲啊！阅读(343) 评论(0) 推荐(0) 编辑

0188 案例：模态框拖拽

摘要：弹出框，我们也称为模态框。 1.点击弹出层，会弹出模态框，并且显示灰色半透明的遮挡层。 2.点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。 3.鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。 4.鼠标松开，可以停止拖动模态框移动 1.1.5 模态框拖拽阅读全文

posted @ 2020-01-12 21:18 冲啊！阅读(229) 评论(0) 推荐(0) 编辑

0187 案例：获取鼠标在盒子内的坐标

摘要： 1. 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。 2. 首先得到鼠标在页面中的坐标（e.pageX, e.pageY） 3. 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop) 4. 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐阅读全文

posted @ 2020-01-12 21:17 冲啊！阅读(192) 评论(0) 推荐(0) 编辑

0186 元素偏移量 offset 系列：offsetTop，offsetLeft，offsetWidth，offsetHeight，offset 与 style 区别，

摘要： 1.1.1 offset 概述 offset 翻译过来就是偏移量，我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 1.1.2 offset 与 style 区别 offset offset 可以得到任意样式表中的样式值 offset 系列获得的数值是没有单位的 of 阅读全文

posted @ 2020-01-12 21:15 冲啊！阅读(330) 评论(0) 推荐(0) 编辑

0185 history对象

摘要： window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。 history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。阅读全文

posted @ 2020-01-12 12:15 冲啊！阅读(114) 评论(0) 推荐(0) 编辑

0184 BOM 之 navigator对象

摘要： navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user agent 头部的值。下面前端代码可以判断用户那个终端打开页面，实现跳转阅读全文

posted @ 2020-01-12 12:11 冲啊！阅读(90) 评论(0) 推荐(0) 编辑

0183 BOM 之 location对象：URL，href、search等属性，5分钟自动跳转页面案例，assign，replace，reload

摘要： 1.2.7.1 什么是 location 对象 1.2.7.2 URL 统一资源定位符：URL（Uniform Resource Locator），是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。 URL 的一般语法格式为阅读全文

posted @ 2020-01-12 12:09 冲啊！阅读(214) 评论(0) 推荐(0) 编辑

0182 JavaScript执行机制：单线程，同步任务和异步任务，执行栈，消息队列，事件循环

摘要：以下代码执行的结果是什么？【结果是1 2 3 】以下代码执行的结果是什么？【结果是1 2 3 】 1.3.1 JS 是单线程 1.3.2 同步任务和异步任务单线程导致的问题就是后面的任务等待前面任务完成，如果前面任务很耗时（比如读取网络数据），后面任务不得不一直等待！！为了解决这个阅读全文

posted @ 2020-01-11 22:39 冲啊！阅读(438) 评论(0) 推荐(0) 编辑