基于原生javascript的淡入淡出函数封装(兼容IE)
来源:互联网 发布:开封教务网络管理系统 编辑:程序博客网 时间:2024/06/07 16:14
在开发的过程中,我们要做淡入淡出效果的话,我们完全可以使用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>
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的淡入淡出函数封装(兼容IE)
- js函数封装,使一个obj的透明度渐变,淡入淡出(兼容IE)
- 兼容ie的javascript封装EventUtil函数
- javascript实现流行的淡入淡出相册
- javascript 淡入淡出效果
- JavaScript淡入淡出
- 原生的JS编写图片的淡入淡出
- 用原生js模拟jquery的淡入淡出fade效果
- 原生js写淡入淡出轮播(点击按钮)
- Web上IMG淡入淡出的HTC封装
- 封装好的淡入淡出轮显幻灯片效果
- 原生Javascript封装的一些常用函数
- 图片的效果(淡入 淡出 。。。。。。)
- 淡入淡出的文字效果
- 淡入淡出的文字效果
- 窗体的淡入淡出
- 层的淡入淡出
- js的淡入淡出
- Swift 数组(Array)
- vim高亮代码中的变量
- 句子逆序
- UVA-10048(弗洛伊德)
- 剑指offer--面试题39:二叉树的深度
- 基于原生javascript的淡入淡出函数封装(兼容IE)
- iOS 10 UIScrollView详解(scrollview自带刷新UIRefreshControl)
- 循环不变式(loop invariant)
- 找出我的GID
- HDU-2015查找最大元素
- 音频播放\录音
- Android 开源项目源码解析 -->Android Universal Image Loader 源码分析(十四)
- Objective-c runnloop
- 2016ACM北京赛区网络赛第三题A simple Job