随笔分类 - 3_4：BOM
摘要：1）需求 //1 如果本地有用户名 就让它显示在文本框中 复选框处于勾选状态//2 如果客户点击了 不记住用户名 我们就删除掉 2）代码实现 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view
阅读全文
摘要：一 基础概念 1）本地存储特性 //1 数据存储在用户浏览器中//2 设置 读取方便 甚至页面刷新不丢失数据//3 只能存储字符串 2）分类 //1 window.sessionStorage 会话存储 //2 window.localStorage 本地存储 3）两者的区别 //1 生命周期不同
阅读全文
摘要：1）下载地址 https://github.com/ireaderlab/zyMedia 二 基本使用 1）引入样式文件zy.media.css和js文件zy.media.js 2）输入html结构，例如视频，其中video标签的data-config属性用于设置参数， <div class="zy
阅读全文
摘要：官方地址：https://www.swiper.com.cn/ 使用教程 1）首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。 <!DOCTYPE h
阅读全文
摘要：1）下载插件 https://github.com/ftlabs/fastclick 2）使用范例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
阅读全文
摘要：1）手机端click为什么会有延时300毫秒 //1 因为在手机端上 连个手机一捏就可以放大页面 连续点击2下复原到原来的大小//2 click的延时就是再等你是否是双击 2）解决方法 //1 禁止页面缩放 <meta name="viewport" content="user-scalable=n
阅读全文
摘要：// 返回顶部模块制作 var goBack = document.querySelector('.goBack'); var nav = document.querySelector('nav'); window.addEventListener('scroll', function() { if
阅读全文
摘要：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,
阅读全文
摘要：1）知识梳理 classList 是H5新增的一个属性作用：获取 添加 删除 切换CSS类添加 删除 切换 等的使用 需要先获取到 2）返回值 返回一个数组DOMTokenList(3) ["one", "two", "three", value: "one two three"] 0: "one"
阅读全文
摘要：移动端介绍 //1 不用考虑兼容性问题 可以放心的使用原生JS //2 能用CSS3的就用c3//3 会有独特的地方 如触屏事件 一 触屏事件 1）常见事件 //1 touchstart 手指触摸事件 //2 touchmove 手指滑动事件 //3 touchend 手指移出事件 2）代码范例 <
阅读全文
摘要：1）需求 //1 鼠标经过某个li 小云彩跟到当前小li//2 鼠标离开小li 筋斗云复原到开始的位置//3 鼠标点击了某个小li 筋斗云就留在点击这个小li上 2）实现原理 //1 利用动画函数做动画效果//2 一开始 筋斗云的起始位置是0//3 鼠标经过某个小li 就把小li的 offsetLe
阅读全文
摘要：滚动窗口到文档中的特定位置 // window.scroll(x,y); x y 不跟单位 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width
阅读全文
摘要：if (callback) { callback();}等同于callback && callback();animate.js //1 动画函数 第三个参数是接收回调函数的形参 function animate(object,target,callback) { clearInterval(obj
阅读全文
摘要：1）节流阀的目的 //1 避免我们连续点击按钮 图片播放过快的问题//2 当上一个函数动画内容执行完毕，再去执行下一个动画，让事件无法连续触发 2）核心思路 //1 利用回调函数 添加一个变量 锁住函数和解锁函数//2 开始这是一个变量 var flag = true;//3 if(flag){fl
阅读全文
摘要：功能分解 //1 鼠标经过轮播图模块 左右按钮显示 鼠标离开隐藏按钮 //2 点击右侧按钮 图片往左播放一张 以此类推 左侧按钮同理//3 图片播放的同时 下面小圆点跟随一起变化 //4 点击小圆点 可以播放相应图片//5 不做任何操作 图片也会定时轮播//3 鼠标经过 轮播图模块自动停止播放 1）
阅读全文
摘要：一 缓动动画添加回调函数 1）注意实现 回调函数调用的位置：定时器结束的位置。 2）代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
阅读全文
摘要：四 缓动动画原理 1）概念 //1 匀速动画：盒子的当前位置 + 固定值 //2 缓动动画：盒子的当前位置 + 变化的值 [(目标值 - 当前位置) / 10 ] 1）基本公式 // ( 目标值 - 现在的位置 ) / 10 2）原理图 代码实现 <!DOCTYPE html> <html lang
阅读全文
摘要：一 动画基本原理 1）核心原理 // 通过定时器 setInterval() 不断移动盒子位置 2）实现步骤 //1 获得盒子当前位置 element.offsetLeft//2 让盒子在当前位置加上1个移动距离//3 利用定时器不断重复这个操作//4 加一个结束定时器的条件//5 此元素需要添加定
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
阅读全文
