基于原生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 相关文章推荐
写了10年的Javascript也未必全了解的连续赋值运算
Mar 25 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
用原生js做单页应用
Jan 17 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
Apr 13 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
Vue.js组件间通信方式总结【推荐】
Nov 23 Javascript
vue中实现高德定位功能
Dec 03 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
深入file_get_contents与curl函数的详解
2013/06/25 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
一些技巧性实用js代码小结
2009/10/14 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
Vue实现跑马灯效果
2020/05/25 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
Python IDLE入门简介
2017/12/08 Python
python机器学习之神经网络(三)
2017/12/20 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
python Paramiko使用示例
2020/09/21 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
中药专业毕业自荐书范文
2014/02/08 职场文书
旅游文化节策划方案
2014/06/06 职场文书
大专生找工作自荐书
2014/06/10 职场文书
聘任书格式及范文
2015/09/21 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
工作报告范文
2019/06/20 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python