基于原生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 确定css方框模型(盒模型Box Model)
Jan 22 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
详解element-ui中form验证杂记
Mar 04 Javascript
浏览器事件循环与vue nextTicket的实现
Apr 16 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
小程序Request的另类用法详解
Aug 09 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生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
php实现在站点里面添加邮件发送的功能
2020/04/28 PHP
php实现解析xml并生成sql语句的方法
2018/02/03 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
js滚动条回到顶部的代码
2011/12/06 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
vue.js实现简单轮播图效果
2017/10/10 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
React styled-components设置组件属性的方法
2018/08/07 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
设置python3为默认python的方法
2018/10/31 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
2013年员工自我评价范文
2013/12/27 职场文书
科技工作者先进事迹
2014/08/16 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
开幕式邀请函
2015/01/31 职场文书
三行辞职书范文
2015/02/26 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫