文档章节

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

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

一、要点

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
博文 79
码字总数 129412
作品 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

基于 BindingX 的富交互解决方案

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

作者: 楚奕 ⋅ 05/31 ⋅ 0

优雅地实现CSS Animation delay

1.需求:   等待元素A的动画加载完,再加载B元素的动画(下图中A为大熊猫,B为下方卡片)   先来看下最后的效果啦: 2.初始思路:   在B元素的动画属性上加上delay(延迟,使得这个延迟...

大雄的学习人生 ⋅ 05/20 ⋅ 0

简单强大的 JavaScript 动画引擎 - Animation.js

Animation.js是一个全新的JavaScript动画引擎!它不是一个生来就具有动画功能的动画“框架”,而是一个去辅助别人制作动画的“引擎”。 Animation.js的使用和操作都极其简单,并且极其有用!...

Skyogo ⋅ 今天 ⋅ 0

Vue笔记(11) - js动画和velocityjs、多组件、列表渲染

可以在属性中声明 JavaScript 钩子,然后钩子绑定事件处理程序,在事件处理程序中改变元素,以达到js实现动画。 例子: 事件处理程序中的动画,我们可以使用velocityjs这个库,而不用自己写。...

神奇的小卷毛 ⋅ 04/24 ⋅ 0

用CSS Houdini画一片星空

要问2018最让人兴奋的CSS技术是什么,CSS Houdini当之无愧,甚至可以去掉2018这个限定。其实这个技术在2016年就出来了,但是在今年3月发布的Chrome 65才正式支持。 CSS Houdini可以做些什么?...

人人网FED ⋅ 04/22 ⋅ 0

CreateJS结合Falsh工具生成Canvas动画(加密字符串的由来)

CreateJS是一款制作Canvas动画的工具。 官网如下: http://www.createjs.com/ http://www.createjs.cc/ 使用CreateJS时最大的疑问就是JS上的加密字符串是如何来的,比如: 其实这个加密字符串...

easonjim ⋅ 2017/04/24 ⋅ 0

WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 发布

WEB GIS 开发框架 mapbox-gl-js v0.46.beta1 已发布。 Mapbox GL JS 是一个 JavaScript 库,使用 WebGL 渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL 渲染意味着高性能,MapboxGL 能够渲染大...

达尔文 ⋅ 06/15 ⋅ 0

谈谈Javascript异步代码优化

前言 在实际编码中,我们经常会遇到Javascript代码异步执行的场景,比如ajax的调用、定时器的使用等,在这样的场景下也经常会出现这样那样匪夷所思的bug或者糟糕的代码片段,那么处理好你的J...

劳卜 ⋅ 05/11 ⋅ 0

谈谈JavaScript异步代码优化

关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 在实际编码中,我们经常会遇到Javascript代码异步执行的场景,比如ajax的调用、定时器的使用等,...

劳卜 ⋅ 05/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

聊聊spring cloud的RequestRateLimiterGatewayFilter

序 本文主要研究一下spring cloud的RequestRateLimiterGatewayFilter GatewayAutoConfiguration @Configuration@ConditionalOnProperty(name = "spring.cloud.gateway.enabled", matchIfMi......

go4it ⋅ 27分钟前 ⋅ 0

Spring JavaConfig 注解

JavaConfig注解允许开发者将Bean的定义和配置放在Java类中。它是除使用XML文件定义和配置Bean外的另一种方案。 配置: 如一个Bean如果在XML文件可以这样配置: <bean id="helloBean" class="...

霍淇滨 ⋅ 34分钟前 ⋅ 0

Spring clound 组件

Spring Cloud技术应用从场景上可以分为两大类:润物无声类和独挑大梁类。 润物无声,融合在每个微服务中、依赖其它组件并为其提供服务。 Ribbon,客户端负载均衡,特性有区域亲和、重试机制。...

英雄有梦没死就别停 ⋅ 35分钟前 ⋅ 0

Confluence 6 重新获得站点备份文件

Confluence 将会创建备份,同时压缩 XML 文件后存储熬你的 <home-directory>/backups> 目录中。你需要自己访问你安装的 Confluence 服务器,并且从服务器上获得这个文件。 运行从 Confluence...

honeymose ⋅ 40分钟前 ⋅ 0

informix的常用SQL语句

1、创建数据库 eg1. 创建不记录日志的库testdb,参考语句如下: CREATE DATABASE testdb; eg2. 创建带缓冲式的记录日志的数据库testdb(SQL语句不一定在事务之中,拥有者名字不被用于对象的解...

wangxuwei ⋅ 56分钟前 ⋅ 0

matplotlib画图

最简单的入门是从类 MATLAB API 开始,它被设计成兼容 MATLAB 绘图函数。 from pylab import *from numpy import *x = linspace(0, 5, 10)y = x ** 2figure()plot(x, y, 'r')...

Dr_hu ⋅ 今天 ⋅ 0

RabbitMQ学习以及与Spring的集成(三)

本文介绍RabbitMQ与Spring的简单集成以及消息的发送和接收。 在RabbitMQ的Spring配置文件中,首先需要增加命名空间。 xmlns:rabbit="http://www.springframework.org/schema/rabbit" 其次是模...

onedotdot ⋅ 今天 ⋅ 0

JAVA实现仿微信红包分配规则

最近过年发红包拜年成为一种新的潮流,作为程序猿对算法的好奇远远要大于对红包的好奇,这里介绍一种自己想到的一种随机红包分配策略,还请大家多多指教。 算法介绍 一、红包金额限制 对于微...

小致dad ⋅ 今天 ⋅ 0

Python 数电表格格式化 xlutils xlwt xlrd的使用

需要安装 xlutils xlwt xlrd 格式化前 格式化后 代码 先copy读取的表格,然后按照一定的规则修改,将昵称中的学号提取出来替换昵称即可 from xlrd import open_workbookfrom xlutils.copy ...

阿豪boy ⋅ 今天 ⋅ 0

面试题:使用rand5()生成rand7()

前言 读研究生这3 年,思维与本科相比变化挺大的,这几年除了看论文、设计方案,更重要的是学会注重先思考、再实现,感觉更加成熟吧,不再像个小P孩,人年轻时总会心高气傲。有1 道面试题:给...

初雪之音 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部