基于原生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 tab插件制作实现代码
Jun 22 Javascript
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
Sep 11 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
史上最全JavaScript数组去重的十种方法(推荐)
Aug 17 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
vue使用canvas实现移动端手写签名
Sep 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+SQLite存储方案
2010/09/04 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
javascript下string.format函数补充
2010/08/24 Javascript
JavaScript初学者需要了解10个小技巧
2010/08/25 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
浅谈Vue.js
2017/03/02 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
2019/07/04 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
2014新课程改革心得体会
2014/03/10 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
工作推荐信模板
2015/03/25 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
关于感恩的作文
2019/08/26 职场文书
六年级作文之自救
2019/12/19 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python