文档章节

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
使用 HTML5 canvas 绘制的图形

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

coko
2013/08/15
0
0
基于 BindingX 的富交互解决方案

基于 BindingX 的富交互解决方案 BindingX 官网: https://alibaba.github.io/bindingx/ BindingX 项目地址: https://github.com/alibaba/bindingx 一. 背景 在 Weex 环境下实现一些复杂的手势...

作者: 楚奕
05/31
0
0
40 个轻量级 JavaScript 库

流行的 JavaScript 库不胜枚举,jQuery, MooTools, Prototype, Dojo, YUI。这些 JavaScript 库功能丰富,加上它们的插件,几乎能胜任任何工作,然而这是有代价的,这些库往往导致你的网页尺寸...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

jetbrains系产品IDEA:mac上面提示快捷键设置

原因 由于Mac上面的Ctrl+空格变成输入法切换的快捷键,在使用IDEA的过程中,代码提示很不方便,需要使用option+/这种传统eclipse上面的代码提示快捷键作为主要快捷键。 怎么修改? 移除【opt...

亚林瓜子
34分钟前
0
0
Exclipse 输出结果时换行

System.out.println(f1 + "\n" + d1 + "\n" + d2);

笑丶笑
35分钟前
1
0
怎样治疗标签不能触发onblur事件

I realize this was over a year ago, but it showed up for me in Google while trying to solve this same issue. It seems Chrome does not consider some elements, like body and ancho......

Weijuer
38分钟前
0
0
vue常见库安装

移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件,才有了FastClick。 安装fastclick npm insta...

林夏夕
40分钟前
0
0
kafka 教程(三) kafka Java API 编程

下午写

MrPei
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部