摘要：1.5.1 什么是插件 移动端要求的是快速开发，所以我们经常会借助于一些插件来帮我完成操作，那么什么是插件呢？ JS 插件 ：是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。 特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。 我们
阅读全文
摘要：移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。 解决方案： 1.4.1 禁用缩放 浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 1.4.2 利用touch事件自己封装这个事件解决300ms 延迟 原理就
阅读全文
摘要：classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。 该属性用于在元素中添加，移除及切换 CSS 类。有以下方法 添加类： element.classList.add（’类名’）； 移除类： element.classList.remove（’类名’）; 切换
阅读全文
摘要：1.3.1 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触
阅读全文
摘要：1. 利用动画函数做动画效果 2. 原先筋斗云的起始位置是0 3. 鼠标经过某个小li，把当前小li的offsetLeft 位置做为目标值即可 4. 鼠标离开某个小li，就把目标值设为 0 5. 如果点击了某个小li， 就把li当前的位置存储起来，做为筋斗云的起始位置
阅读全文
摘要：返回顶部 1. 带有动画的返回顶部 2. 此时可以继续使用我们封装的动画函数 3. 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了 4. 页面滚动了多少，可以通过 window.pageYOffset 得到 5. 最后是页面滚动，使用 window.scroll(x,y)
阅读全文
摘要：轮播图也称为焦点图，是网页中比较常见的网页特效。 功能需求： 1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。 3.图片播放的同时，下面小圆圈模块跟随一起变化。 4.点击小圆圈，可以播放相应图片。 5.鼠标
阅读全文
摘要：1.6.1 动画实现原理 核心原理：通过定时器 setInterval() 不断移动盒子位置。 实现步骤： 1. 获得盒子当前位置 2. 让盒子在当前位置加上1个移动距离 3. 利用定时器不断重复这个操作 4. 加一个结束定时器的条件 5. 注意此元素需要添加定位，才能使用element.style
阅读全文
摘要：当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover，它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发 。 mouseenter 只会经过自身盒子触发 。 之所以这样，就是因为mouseenter不会冒泡 跟mouseenter搭配鼠标
阅读全文
摘要：他们主要用法： 1.offset系列 经常用于获得元素位置 offsetLeft offsetTop 2.client经常用于获取元素大小 clientWidth clientHeight 3.scroll 经常用于获取滚动距离 scrollTop scrollLeft 4.注意页面滚动的距离通过
阅读全文
摘要：1.3.1 scroll 概述 scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。 1.3.2 页面被卷去的头部 如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被
阅读全文
摘要：1.2.1 client概述 client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 1.2.2. 淘宝 flexible.js 源码分析 立即执行函数 (function()
阅读全文
摘要：1.1.6 案例：仿京东放大镜 整个案例可以分为三个功能模块 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功能 黄色的遮挡层跟随鼠标功能。 移动黄色遮挡层，大图片跟随移动功能。 1.1.7 案例分析 黄色的遮挡层跟随鼠标功能。 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父
阅读全文
摘要：弹出框，我们也称为模态框。 1.点击弹出层，会弹出模态框， 并且显示灰色半透明的遮挡层。 2.点击关闭按钮，可以关闭模态框，并且同时关闭灰色半透明遮挡层。 3.鼠标放到模态框最上面一行，可以按住鼠标拖拽模态框在页面中移动。 4.鼠标松开，可以停止拖动模态框移动 1.1.5 模态框拖拽
阅读全文
摘要：1. 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。 2. 首先得到鼠标在页面中的坐标（e.pageX, e.pageY） 3. 其次得到盒子在页面中的距离 ( box.offsetLeft, box.offsetTop) 4. 用鼠标距离页面的坐标减去盒子在页面中的距离，得到 鼠标在盒子内的坐
阅读全文
摘要：1.1.1 offset 概述 offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 1.1.2 offset 与 style 区别 offset offset 可以得到任意样式表中的样式值 offset 系列获得的数值是没有单位的 of
阅读全文
摘要： window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL。 history对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。
阅读全文
摘要： navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user agent 头部的值。 下面前端代码可以判断用户那个终端打开页面，实现跳转
阅读全文
摘要：1.2.7.1 什么是 location 对象 1.2.7.2 URL 统一资源定位符：URL（Uniform Resource Locator） ， 是互联网上标准资源的地址。互联网上的每个文件都有 一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。 URL 的一般语法格式为
阅读全文
浙公网安备 33010602011771号