文档章节

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
码字总数 129345
作品 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
使用 HTML5 canvas 绘制精美的图形

本文主要介绍使用一个简单的 HTML 元素 Canvas 来增强您的 web 页面。通过利用其灵活性和多样性吸引访客反复访问您的站点。 HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HT...

IBMdW
2012/02/21
3.1K
4

没有更多内容

加载失败,请刷新页面

加载更多

mysql 时间格式化

DATE_FORMAT

1713716445
6分钟前
0
0
聊聊flink的PartitionableListState

序 本文主要研究一下flink的PartitionableListState PartitionableListState flink-runtime_2.11-1.7.0-sources.jar!/org/apache/flink/runtime/state/DefaultOperatorStateBackend.java /*......

go4it
11分钟前
0
0
Micropython教程之TPYBoard开发板制作电子时钟(萝卜学科编程教育)

1.实验目的 1. 学习在PC机系统中扩展简单I/O?接口的方法。 2. 什么是SPI接口。 3. 学习TPYBoard I2C接口的用法。 4. 学习LCD5110接线方法。 5. 设定时钟并将当前时间显示在LCD5110上。 2.所需...

bodasisiter
11分钟前
0
0
js 闭包

闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是 ECMAScript 规范给的定义,如果没有实战经验,很难从定义去理解它。因此,本文不会对闭包的概念...

MrBoyce
16分钟前
0
0
Java B2B2C o2o多用户商城 springcloud架-企业云架构common-service代码结构分析

当前的分布式微服务云架构平台使用Maven构建,所以common-service的通用服务按照maven构建独立的系统服务,结构如下: particle-commonservice: spring cloud 系统服务根项目,所有服务项目...

itcloud
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部