基于原生js淡入淡出函数封装（兼容IE）
在开发的过程中，我们要做淡入淡出效果的话，我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用，而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。
构建框架，基本没难度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>透明度函数的封装</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: red;
margin: 50px auto;
opacity: .3;
filter: alpha(opacity:30);
}
</style>
</head>
<body>
<div id="box"></div>
<script src="toumingdu.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
编写javascript部分，主要难点是changeOpacity()函数。
window.onload = function (){
var box = document.getElementById('box');
box.onmouseover = function (){
changeOpacity(this,100);
}
box.onmouseout = function (){
changeOpacity(this,30);
}
}
/**
*
* @param {Object} box 要变化透明度的元素
* @param {Object} target 透明度的目标值（100为最高）
*/
function changeOpacity(box,target){
var opa;
var speed;
if(box.currentStyle){
//判断浏览器类型，此类型为IE浏览器，即使IE不支持opacity属性，但是仍然可以获取值
opa = box.currentStyle['opacity']*100;
}
else{//其他浏览器
opa = getComputedStyle(box,false)['opacity']*100;
}
//透明度每次变化的值（步长），根据目标值和当前值的差来决定步长的正负
target-opa>=0?speed=1:speed=-1;
clearInterval(box.timer);
box.timer = setInterval(function (){
//目标值和当前值差值的绝对值大于等于步长的绝对值，设置透明度为当前值加步长
if(Math.abs(target-opa)>=Math.abs(speed)){
box.style.opacity=(opa+speed)/100;
box.style.filter='alpha(opacity:'+(opa+speed)+')';
}
//目标值和当前值差值的绝对值小于步长的绝对值，剩余的距离一步到位，
//设置透明度直接为目标值，同时清除定时器
else{
box.style.opacity=target/100;
box.style.filter='alpha(opacity:'+target+')';
clearInterval(box.timer);
}
//直接对透明度参数进行加步长的运算，避免每次都要获取当前透明度
opa=opa+speed;
},30);
}
这个透明度函数的原理在大体上是跟运动函数相同的。总结为三步：
1、获取当前值，根据目标值和当前值确定步长；
2、变化的过程，每次变化一个值（渐变动画和透明度其步长为不同的值，而匀速动画和透明度步长为定值）；
3、判断是否达到目标值，达到则清除定时器，结束。
所以如果原理弄不清楚可以看一下另一篇文章javascript匀速动画和缓冲动画。
而在理解原理的情况下最大的难点应该是当前透明度的获取了（赋值比较简单）。获取透明度的值我们要考虑两种情况：
1、IE，虽然在在IE下不支持opacity属性，但是我们是可以通过box.currentStyle['opacity']获取到它的值的，同时我们在写入的时候也会将给opacity的值写入css中，尽管IE不会因为opacity值的改变而变化透明度。
2、其他浏览器，其他浏览器是支持opacity属性，所以我们操作相对简单了许多，写入和读取都针对opacity即可。
接下来细讲在IE浏览器中的操作：
首先我们的css文件中有两个属性值在我们的操作中是有用的 opacity: .3; filter: alpha(opacity:30); 显然我们很难获取filter属性中的opacity值（我不会！），但是如果我们使用currentStyle来获取opacity是比较简单的。所以我进行了测试发现，尽管IE不支持这个属性，但是这个属性值的读取和写入时完全没问题的，所以，问题就迎刃而解了！我们通过opacity可以读取当前透明度，然后通过filter改变透明度，同时，我们改变opacity的值（不仅是为了兼容其他浏览器，同时我们写入以后IE浏览器中在下次移入的时候还可以获取当前的透明度，否则的话获取的是初始的opacity值）。那么下面不就和动画那个问题一样了？
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何使用JS和百度地图实现地图平移功能
Nov 21, 2023 am 10:00 AM
如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
如何使用JS和百度地图实现地图热力图功能
Nov 21, 2023 am 09:33 AM
如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP
如何使用JS和百度地图实现地图点击事件处理功能
Nov 21, 2023 am 11:11 AM
如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：
PHP与JS开发技巧：掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
如何使用JS和百度地图实现地图多边形绘制功能
Nov 21, 2023 am 10:53 AM
如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript
