基于原生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 相关文章推荐
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
Oct 30 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
JavaScript代码简化技巧实例解析
Sep 09 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 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无法请求https连接的方法
2013/12/17 PHP
php随机显示指定文件夹下图片的方法
2015/07/13 PHP
thinkphp实现图片上传功能
2016/01/13 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
python操作redis方法总结
2018/06/06 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
解析Python的缩进规则的使用
2019/01/16 Python
使用Python做垃圾分类的原理及实例代码附源码
2019/07/02 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
怎么快速自学python
2020/06/22 Python
重构Python代码的六个实例
2020/11/25 Python
CSS3 background-image颜色渐变的实现代码
2018/09/13 HTML / CSS
CSS3中的@keyframes关键帧动画的选择器绑定
2016/06/13 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
2016年寒假社会实践活动总结
2015/10/10 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书
解决numpy和torch数据类型转化的问题
2021/05/23 Python
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL