[TOC]
## 1. 簡單的fadeIn-fadeOut

~~~
<style>
* {
padding: 0;
margin: 0;
}
img {
width: 400px;
}
#parent {
margin-left: auto;
margin-right: auto;
position: relative;
width: 400px;
border: 1px solid;
padding: 20px;
border-radius: 3px;
}
#fade {
width: 100%;
height: 100%;
position: absolute;
background: #2dae2d;
opacity: 0.3;
left: 0;
top: 0;
z-index: 10;
}
</style>
~~~
~~~
<div id="parent">
<img src="images/01.png" alt="">
<div id="fade"></div>
</div>
<script>
//使用定時器
/*
1.執行事件時先清除定時器
2.定時器中的內容,用if-else 來判斷上下限
*/
var parent = document.getElementById("parent");
var fade = document.getElementById("fade");
var timer;
var opacity = getComputedStyle(fade).opacity * 100;
parent.onmouseover = function () {
clearTimeout(timer);
timer = setInterval(function () {
console.log(opacity + 2)
if (opacity > 70) {
clearTimeout(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>
~~~
## 封裝后的fadeIn-fadeOut
~~~
<script>
//使用定時器
/*
1.執行事件時先清除定時器
2.定時器中的內容,用if-else
*/
var parent = document.getElementById("parent");
var fade = document.getElementById("fade");
var timer;
var opacity = getComputedStyle(fade).opacity * 100;
/*
1.進入事件后清除定時器
2.在定時器中,loop的代碼和到達臨界值清除定時器的代碼,用if-else分割
*/
parent.onmouseover = function () {
animate(70,2);
}
parent.onmouseout = function () {
animate(30,-2);
}
function animate(reach,add){
clearInterval(timer);
timer = setInterval(function () {
if (opacity == reach) {
clearInterval(timer);
} else {
opacity += add;
fade.style.opacity = opacity / 100;
}
}, 100)
}
</script>
~~~
- 效果實例
- 1.點擊增加高度
- 2.tab頁面切換
- 3. 列表切換
- 4. 隔行變色
- 5. swiper 輪播
- 6.vue
- 7.定時器
- 8. 向表格中添加數據
- 9 瀑布流
- 1.JavaScript基礎
- 1. 變量
- 2. 調試
- 3.數據類型
- 4.轉換
- 5.控制語句
- 6.運算
- 7. this
- 8 JSON對象和javascript對象的相互轉換
- 2.JavaScript的控制語句
- 1. 基本控制語句
- 2.節點
- 2.1DOM補充
- 3. 函數
- js的模塊化如何解決
- 不知道有什么用的
- 4.數組
- 5. String
- 補充
- 6.Ajax
- 1. 原生Ajax
- 2. HTTP/get/post
- 3.jQuery-Ajax
- 4.跨域
- 5.axios
- 6.封裝
- Ajax效果
- ajax補充
- 7. 正則
- 1.創建正則表達式
- 2. 正則的api
- 3.正則語法
- 4.例子
- 量詞
- 8.面向對象
- 1.原型
- ES6
- 模塊化
- 1.回調地獄
- 什么是回調地獄
- 簡單封裝
- promise解決回調地獄
- generator解決回調地獄
- async解決回調地獄
- 2.封裝
- Ajax,promise
- JavaScript難點
- 1. 閉包/作用域
- 2.原型鏈
- 3. 兼容性
- 適配
- JavaScript小效果
- 字符串截取