基于原生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 相关文章推荐
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
Aug 16 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
Vue中key的作用示例代码详解
Jun 10 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 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+XML 制作简单的留言本 图文教程
2009/11/02 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
浅谈JS和jQuery的区别
2019/03/27 jQuery
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
JavaScript中数组去重的5种方法
2020/07/04 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
Python常见工厂函数用法示例
2018/03/21 Python
python 创建一个空dataframe 然后添加行数据的实例
2018/06/07 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
Python3爬虫学习之将爬取的信息保存到本地的方法详解
2018/12/12 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
远东集团网络工程师面试题
2014/10/20 面试题
会计专业毕业生自我鉴定
2013/10/29 职场文书
学习委员自我鉴定
2014/01/13 职场文书
中国央视网签名寄语
2014/01/18 职场文书
一份创业计划书范文
2014/02/08 职场文书
2014年教师节寄语
2014/04/03 职场文书
煤矿安全生产月活动总结
2014/07/05 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
小学端午节活动总结
2015/02/11 职场文书
2016年寒假社会实践活动总结
2015/10/10 职场文书
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL