基于原生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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
JavaScript输出当前时间Unix时间戳的方法
Apr 06 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
详解React-Todos入门例子
Nov 08 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
JS检测是否可以访问公网服务器功能代码
Jun 19 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
JS实现旋转木马轮播图
Jan 01 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
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
jquery实现盒子下拉效果示例代码
2013/09/12 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
2015/11/25 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
vue.js的提示组件
2017/03/02 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
开办饭店创业计划书
2013/12/28 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
物理力学求职信
2014/02/18 职场文书
公司门卫岗位职责
2014/03/15 职场文书
师范生求职自荐信
2014/06/14 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
会计入职心得体会
2016/01/22 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
立秋之描写立秋的作文(五年级)
2019/08/08 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers
JavaScript执行机制详细介绍
2021/12/06 Javascript
详解Python如何批量采集京东商品数据流程
2022/01/22 Python
特别篇动画《总之就是非常可爱 ~制服~》PV公开,2022年夏季播出
2022/04/04 日漫
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers