目录
3.3 淡入效果 --- 仿jQuery中的fadeIn()函数
3.4 淡出效果 --- 仿jQuery中的fadeOut()函数
3.5 淡入/淡出效果 --- 仿jQuery中的fadeToggle()函数
一、前言
一提到淡入淡出效果,大家可能会想到jQuery的fadeIn(),fadeOut()和fadeToggle()函数,它们被封装到库中,很方便被调用。但是有时候只为了一个简单的淡入淡出效果,并不需要去调用庞大的jQuery库,所以,下面我们用纯js代码实现淡入淡出的效果。需要注意的是,obj.style.xxx 只能获取HTML标签中的style属性的样式信息,无法获取外联和内联中的样式信息。
二、需求分析
要实现淡入淡出效果,就是要使用到setInterval()函数,改变element节点透明度opacity,来解决这个问题。
三、功能实现
3.1 HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原生JS实现jQuery淡入淡出效果</title>
<script src="mainEvent.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#testBox{
width: 200px;
height: 200px;
background-color: #009E94;
opacity: 1;
}
</style>
</head>
<body>
<button id="fadeInBtn">淡入</button>
<button id="fadeOutBtn">淡出</button>
<button id="fadeToggleBtn">淡入/淡出</button>
<div id="testBox"></div>
</body>
</html>
3.2 JavaScript初始化代码
window.onload = function() {
var fadeInBtn = document.getElementById("fadeInBtn");
var fadeOutBtn = document.getElementById("fadeOutBtn");
var fadeToggleBtn = document.getElementById("fadeToggleBtn");
var testBox = document.getElementById("testBox")
fadeInBtn.onclick = function() {
fadeIn(testBox);
}
fadeOutBtn.onclick = function() {
fadeOut(testBox);
}
fadeToggleBtn.onclick = function(){
fadeToggle(testBox);
}
}
3.3 JavaScirpt淡入效果 --- 仿jQuery中的fadeIn()函数
function fadeIn(elemt, speed) { //淡入 0 ~ 1
if(elemt.style.opacity == 0 && elemt.style.opacity != "") {
var speed = speed || 16.6; //默认速度为16.6ms
var num = 0; //累加器
var timer = setInterval(function() {
num++;
elemt.style.opacity = num / 20;
if(num >= 20) {
clearInterval(timer);
}
}, speed);
}
}
3.4 JavaScirpt淡出效果 --- 仿jQuery中的fadeOut()函数
function fadeOut(elemt, speed) { //淡出 1 ~ 0
if(elemt.style.opacity == 1 || elemt.style.opacity == "") {
var speed = speed || 16.6; //默认速度为16.6ms
var num = 20; //累剪器
var timer = setInterval(function() {
num--;
elemt.style.opacity = num / 20;
if(num == 0) {
clearInterval(timer);
}
}, speed);
}
}
3.5 JavaScript淡入/淡出效果 --- 仿jQuery中的fadeToggle()函数
function fadeToggle(elemt, speed) {
var speed = speed || 16.6; //默认速度为16.6ms
if(elemt.style.opacity == 0 && elemt.style.opacity != "") {
var num = 0; //累加器
var timer = setInterval(function() {
num++;
elemt.style.opacity = num / 20;
if(num >= 20) {
clearInterval(timer);
}
}, speed);
}else if(elemt.style.opacity == 1 || elemt.style.opacity == "") {
var num = 20; //累剪器
var timer = setInterval(function() {
num--;
elemt.style.opacity = num / 20;
if(num == 0) {
clearInterval(timer);
}
}, speed);
}
}