文档章节

JavaScript 动画 2---透明度动画

奋斗的小芋头
 奋斗的小芋头
发布于 2017/04/29 10:31
字数 182
阅读 3
收藏 1

一、要点

1、setInterval

2、 oDiv1.style.filter ='alpha(opacity:'+alpha+')'; //IE
       oDiv1.style.opacity = alpha/100;  //满值为1 所以除以100

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,div{
				margin:0;
				padding:0;
			}
			#div1{
				width:200px;
				height:200px;
				background:red;
				filter:alpha(opacity:20); /*IE*/
				opacity:0.2;
			}
		</style>
		<script>
			window.onload =function(){
				var oDiv1 = document.getElementById('div1');
				
				oDiv1.onmouseover = function(){
					startChange(100);
				}
				oDiv1.onmouseout = function(){
					startChange(20);
				}
				
			}
			
			var timer = null; //设置定时器
			var alpha = 20; //定义初始透明度
			function startChange(iTarget){
				var oDiv1 = document.getElementById('div1');
				clearInterval(timer);
				timer = setInterval(function(){
					var speed = 0;
					if(alpha>iTarget){
						speed = -10;
					}else{
						speed = 10;
					}
					if(alpha == iTarget){
						clearInterval(timer); //达到目标值停止定时器
					}else{
						alpha +=speed;
						oDiv1.style.filter ='alpha(opacity:'+alpha+')'; //IE
						oDiv1.style.opacity = alpha/100;  
						//满值为1
					}
				},30)
				
			}
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
奋斗的小芋头
粉丝 1
博文 161
码字总数 129412
作品 0
大连
30 Seconds of CSS代码块解读(动画篇)

30 Seconds of CSS代码块解读(动画篇) 这是第三篇解读,主要包括加载效果,自定义过渡动画函数和下划线动画。其中弹跳加载很具有实用性,可以用于加载组件中,让加载效果更加个性化。 Bounci...

坤少卡卡
07/02
0
0
[译] JavaScript 是如何工作的:CSS 和 JS 动画背后的原理 + 如何优化性能

原文地址:How JavaScript works: Under the hood of CSS and JS animations + how to optimize their performance 原文作者:Alexander Zlatkov 译文出自:掘金翻译计划 本文永久链接:git......

辣手摧花
05/15
0
0
使用BindingX开发客户端炫酷动画

Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEn...

xiangzhihong
09/17
0
0
使用 HTML5 canvas 绘制的图形

HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.0...

coko
2013/08/15
0
0
原生JS实现抛物线动画以及动态模糊效果

苏格团队 作者:Jason 前言 某一天我收到了产品发来的微信消息。小X,我们的业务现在需要一个类似加入购物车的掉落动画,经过组织的慎重考虑,这个需求就交给你了。于是便有了这篇文章。本文...

苏格团队
09/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Apache Bench学习笔记

使用apache bench测试并发请求 ab -H "X-IMATRIX-ACCESS-TOKEN:1234567" -c 1000 -n 1000 http://localhost:8080/portfolioes/1/performance...

OSC_fly
29分钟前
2
0
Oracle推出轻量级Java微服务框架Helidon

近日,Oracle 推出 了一个新的开源框架 Helidon ,该项目是一个用于创建基于微服务的应用程序的Java库集合。和 Payara Micro 、 Thorntail (之前的 WildFly Swarm )、 OpenLiberty 、TomEE...

小刀爱编程
30分钟前
5
0
mysql 按周统计

方法一 : 使用 DATE_FORMAT 格式化时间,格式化参数参考 -- 参考地址 SELECTDATE_FORMAT( create_time, '%Y%u' ) weeks,DATE_FORMAT( date_sub( create_time, INTERVAL WEEKDAY( cre...

小鸟00
34分钟前
3
0
深入理解JAVA锁的机制

1. synchronized实现原理 在java代码中使用synchronized可是使用在代码块和方法中,根据Synchronized用的位置可以有这些使用场景: 如图,synchronized可以用在方法上也可以使用在代码块中,...

laigous
35分钟前
2
0
Mysql几种索引类型的区别及适用情况

如大家所知道的,Mysql目前主要有以下几种索引类型:FULLTEXT,HASH,BTREE,RTREE。 那么,这几种索引有什么功能和性能上的不同呢? FULLTEXT 即为全文索引,目前只有MyISAM引擎支持。其可以...

ZhangLG
45分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部