<style>
* {
margin: 0;
padding: 0
}
img {
width: 200px;
padding: 20px;
}
#parent {
margin-left: auto;
margin-right: auto;
position: relative;
width: 240px;
border: 1px solid #333;
}
#fade {
width: 100%;
height: 100%;
position: absolute;
background: #96514d;
opacity: 0.3;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="parent">
<img src="images/fade.png" alt="">
<div id="fade"></div>
</div>
<script>
var parent = document.getElementById("parent");
var fade = document.getElementById("fade");
var opacity = getComputedStyle(fade).opacity * 100;
var timer;
// 使用定时器做动画
/*
1.执行事件时首先清除定时器
2.定时器中的内容,用if-else
*/
parent.onmouseover = function () {
clearInterval(timer);
timer = setInterval(function () {
if (opacity > 70) {
clearInterval(timer)
} else {
opacity += 2;
fade.style.opacity = opacity / 100;
}
}, 50)
}
parent.onmouseout = function () {
clearInterval(timer);
timer = setInterval(function () {
if (opacity < 30) {
clearInterval(timer)
} else {
opacity -= 2;
fade.style.opacity = opacity / 100;
}
}, 50)
}
</script>
- JavaScript介绍
- js基本语法
- 调试方法
- 标识符
- 数据类型(基本，引用）
- 基本数据类型
- 引用数据类型
- 严格模式.
- 全局变量和局部变量
- DOM 节点
- DOM 改变元素内容（样式 内容）
- 节点改变元素内容（通过父子节点找到元素然后操作）
- 添加元素
- 设置 移除 属性
- DOM下的事件
- 知识点整理
- 异步
- Ajax
- this指向问题
- 设备类型检测（手机 平板 电脑）
- 函数
- 函数的参数
- 重载
- 数据类型
- 构造函数
- 返回上一个网页
- 数组 （重点）
- 增加数组内容
- 删除数组元素
- 复制数组
- 修改数组元素（功能强大实现 增 删 改）
- 数组元素查询
- 数组遍历
- 最值
- 展开语法
- join
- 排序问题
- 求和
- 颠倒数组
- 判断是不是一个数组
- 二维数组
- 数组和字符串之间转换
- 数组去重
- 将jquery对象转为javascript对象
- 元素偏移量
- 获取一个元素距离顶部的距离
- 可视区域宽高
- 布局视口 （移动设备）
- 文档碎片
- 表格中的 thead tbody
- 获取元素宽度
- 滚动区域宽高
- div滚动条设置
- 使用 offsetWidth 设置父元素宽度和子元素宽度之和一样
- 字符串的方法
- js功能实现
- 点击显示 隐藏
- 点击变色 兄弟元素隐藏.
- 点击显示隐藏区域.
- 兼容性问题.
- 选择按钮,
- 获取外部样式
- 点击弹出下标
- 通过属性改变img 的src
- 小米登录 es6实现js
- try catch
- 小米登录es5实现js
- js实现导航栏点击加载多个页面
- js实现网页之间的跳转和在指定div加载页面
- iframe 高度实现自适应
- js 获取滚动条距离顶端的距离
- jQuery animate() 方法 动画效果
- fade（js实现遮罩层渐变色）
- js轮播实现
- 超哥轮播js
- 轮播动画原理
- 数组实现瀑布流
- 电子表计时器date
- 从豆瓣接口上取数据实现搜索功能（重点！！！！）
- 封装
- 不使用js-ajax 使用VueResource实现数据请求
- 需要常看的知识点
- 移动端响应布局rem
- rem+vw
- 原型
- JS的模块化如何解决
- ES5和ES6模块化写法
- js内置对象
- 结构赋值es6
- 字符串模板 分割字符串
- 谈基本数据类型中的方法（本不带有方法）
- Math
- date
- 正则
- 备选字符集
- 连号的备选字符集
- replace() 查找替换（过滤）
- 量词
- 不确定的数量
- search找下标
- test()检验是否包含正则表达式
- 实例
- 验证电话号码
- 邮箱验证
- 将指定内容过滤（天猫 淘宝）
- 预定义字符集（简化）
- 严格匹配 ^ $
- Ajax
- http get post
- $.get()和$.post()详解
- jquery-ajax 数据请求
- 使用Vue Ajax在网页中渲染数据
- axios向服务器端get，post数据（重点）
- 跨域
- 原生Ajax
- 原理步骤 json解析字符串
- 多态
- js中的面向对象
- js中的类和继承
- 原型和原型链
- 参数表达式
- 字符串中常用的方法
- mock.js
- scrollReveal 滚动显示
- Node.js模块里exports与module.exports的区别