文档章节

基于原生javascript的淡入淡出函数封装(兼容IE)

zfx2016
 zfx2016
发布于 2016/10/19 11:42
字数 996
阅读 1
收藏 0

在开发的过程中,我们要做淡入淡出效果的话,我们完全可以使用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值)。那么下面不就和动画那个问题一样了?




© 著作权归作者所有

zfx2016
粉丝 1
博文 22
码字总数 14027
作品 0
广州
前端工程师
私信 提问
jQuery常用知识点总结以及平时封装常用函数

jquery效果 隐藏/显示: 淡入/淡出: 滑动:slideDown/slideUp(speed,callback) 动画: jQuery DOM 获取文本值、属性值: js代码: 设置文本属性值: js代码: 添加元素: 删除元素: 查找元...

heartless01
2017/10/31
17
0
IE6滤镜使用后的问题

向高手请教IE6滤镜使用后的问题: 在IE6下使用滤镜处理png图片后,如何再让这张图片淡入淡出?(即在IE6下如何处理已是透明的图片的淡入淡出) 用原生JS做如何做,多谢~

hello_152
2013/07/05
214
4
现代浏览器的web音频javascript类库 - Howler.js

日期:2013-2-6 来源:GBin1.com 在线演示 浏 览器这个玩意儿并不是个新鲜事,但是随着HTML5的发展激起了浏览器技术的巨大发展。但是浏览器上对于音频控制技术来说仍旧非常的落伍。庆幸的是 ...

gbin1
2013/02/07
662
1
Jquery工作常用实例——淡入淡出功能实现

首先说下几个事件的用法: 1:$(selector).fadeOut(speed,callback)):淡出被选元素; 2:$(selector).fadeIn(speed,callback): 淡入被选元素; 3:$(selector).fadeTo(speed,opacity(亮度)...

Adam-Lee
2011/07/12
475
0
10 个非常酷的基于jQuery的菜单效果插件

除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 1. 右击菜单 一个创建右击菜单的插件,简洁且易...

红薯
2011/12/20
3.9K
4

没有更多内容

加载失败,请刷新页面

加载更多

总结:Linux

一、目录 目录 作用 /bin 存放二进制可执行文件(ls,cat,mkdir等),常用命令一般都在这里。 /etc /home 存放所有用户文件的根目录,是用户主目录的基点,比如用户user的主目录就是/home/user,...

浮躁的码农
26分钟前
4
0
什么是 happens-before 原则?

Java 中 happens-before 原则,是在 JSR-133 中提出的。 原文摘要: • Each action in a thread happens-before every subsequent action in that thread. • An unlock on a monitor happe......

ConstXiong
38分钟前
5
0
8核AMD Zen加持:微软Surface这回血拼

微软定于10月2日在纽约举办Surface新品发布会,几乎全线消费级产品都将更新,比如15英寸Surface Laptop 3。 最新爆料称,15寸Surface Laptop 3预计一口气推出6款型号,其中顶配为8核AMD处理器...

linuxCool
39分钟前
4
0
BeginnersBook MongoDB 教程

来源:ApacheCN BeginnersBook 翻译项目 译者:飞龙 协议:CC BY-NC-SA 4.0 贡献指南 本项目需要校对,欢迎大家提交 Pull Request。 请您勇敢地去翻译和改进翻译。虽然我们追求卓越,但我们并...

ApacheCN_飞龙
41分钟前
6
0
Java NIO:Buffer、Channel 和 Selector

本文将介绍 Java NIO 中三大组件 Buffer、Channel、Selector 的使用。 本来要一起介绍非阻塞 IO 和 JDK7 的异步 IO 的,不过因为之前的文章真的太长了,有点影响读者阅读,所以这里将它们放到...

乱世当空
42分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部