基于原生js淡入淡出函数封装(兼容IE)


Posted in Javascript onOctober 20, 2016

在开发的过程中,我们要做淡入淡出效果的话,我们完全可以使用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值)。那么下面不就和动画那个问题一样了?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery遍历节点的方法小集
Jan 22 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
Sep 05 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
Node使用koa2实现一个简单JWT鉴权的方法
Jan 26 Javascript
纯JavaScript手写图片轮播代码
Oct 20 #Javascript
Zabbix添加Node.js监控的方法
Oct 20 #Javascript
Javascript实现图片懒加载插件的方法
Oct 20 #Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 #Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 #Javascript
Javascript 创建类并动态添加属性及方法的简单实现
Oct 20 #Javascript
javascript匀速动画和缓冲动画详解
Oct 20 #Javascript
You might like
php debug 安装技巧
2011/04/30 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
微信小程序教程系列之新建页面(4)
2017/04/17 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
JS实现的抛物线运动效果示例
2018/01/30 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
python设置检查点简单实现代码
2014/07/01 Python
python实现数组插入新元素的方法
2015/05/22 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
python取代netcat过程分析
2018/02/10 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
python是否适合网页编程详解
2019/10/04 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
Python logging日志模块 配置文件方式
2020/07/12 Python
python PyAUtoGUI库实现自动化控制鼠标键盘
2020/09/09 Python
一篇文章教你用python画动态爱心表白
2020/11/22 Python
css3动画 小球滚动 js控制动画暂停
2019/11/29 HTML / CSS
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
公司清洁工岗位职责
2013/12/14 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
金融与证券专业求职信
2014/06/22 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
公司职员入党自传书
2015/06/26 职场文书