js动画实现透明度动画
在本次实例中，由于一般主流的浏览器对于透明度opacity最大值为1，但是在IE6最大值是100，此次例子是按主流浏览器的透明度来算的，所以定义的是小数，也可以定义为整数为单位，在运算的时候遇到主流的浏览器除以100就可以了。
实例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>透明度动画</title>
<style>
body,div{
margin:0;
padding:0;
}
.opacity_move{
height:200px;
width:200px;
background:#936;
opacity:0.3;
}
</style>
<script>
window.onload = function (){
var div = document.getElementById('opacity_move');
div.onmouseover = function (){
opacity_move(0.1, 1);
}
div.onmouseout = function (){
opacity_move(-0.1, 0.3);
}
}
var timer = null;
var opacity = 0.3;
function opacity_move(speed, target){
var div = document.getElementById('opacity_move');
clearInterval(timer);
timer = setInterval(function(){
if(opacity.toFixed(1) == target){//浮点数之间的运算存在误差，会有很多位的小数，所以在判断是否等于一时需要四舍五入来计算，并且保留一位小数。
clearInterval(timer);
}
else{
opacity += speed;
div.style.filter = 'alpha(opacity:' + opacity + ')';
div.style.opacity = opacity;
}
}, 500);
}
</script>
</head> <body>
<div id="opacity_move" class="opacity_move"></div>
</body>
</html>
动画总结：
1.先设置一个定时器；
var timer = null;
2.清空定时器；
clrarInterval(timer);
3.打开定时器，并写功能；
timer = setInterval(function(){
/*功能*/
},1000);
4.判断相应条件关闭定时器。
timer = setInterval(function(){
if(/*条件*/){
clrarInterval(timer);
}
else{
/*功能*/
}
},1000);
js动画实现透明度动画的更多相关文章
- js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画
主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...
- 第一百四十二节，JavaScript，封装库--运动动画和透明度动画
JavaScript,封装库--运动动画和透明度动画 /** yi_dong_tou_ming()方法,说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x ...
- js实现匀速运动及透明度动画
1.html代码 <body> <div id="container"> <span id="btn"></span& ...
- js进阶 13 jquery动画函数有哪些
js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
- js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么
js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...
- 用js触发CSS3-transition过渡动画
用js触发CSS3-transition过渡动画 经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例 ...
- Three.js基础探寻十——动画
本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...
- js spin 加载动画（loading）
js spin 加载动画 最近做页面ajax加载是又用到loading动画,还好有一个spin.js 具体的包大家可以去http://fgnass.github.com/spin.js/下载, 如果想 ...
- Android 动画-alpha(渐变透明度动画效果)
今天苦于思索应用如何美观,首先从载入页面的第一眼开始,Android动画分为四种:alpha(渐变透明度),scale(渐变尺寸伸缩),translate(画面转换位置移动),rotate(画面转移旋 ...
随机推荐
- supersr--图片轮播逻辑
// // ViewController.m // 图片轮播 // // Created by apple on 14-5-18. // Copyright (c) 2014年 All rig ...
- android bitmap的放大缩小
private static Bitmap big(Bitmap bitmap) { Matrix matrix = new Matrix(); matrix.postScale(1.5f,1.5f) ...
- Java观察者模式（Observer模式）
Java深入到一定程度,就不可避免的碰到设计模式(design pattern)这一概念,了解设计模式,将使自己对java中的接口或抽象类应用有更深的理解.设计模式在java的中型系统中应用广泛,遵循 ...
- NYOJ题目114某种序列
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAHuCAIAAAD83zYaAAAgAElEQVR4nO3dP1LjygIv4LcJ5yyE2A
- NYOJ题目836画图
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAsoAAAMbCAIAAADb4SQpAAAgAElEQVR4nO3du1Iq3dYG4H0T5l6IMR
- profiler加入计划任务
创建profiler的存储过程: USE [xxxDB] GO /****** Object: StoredProcedure [dbo].[CreateProfile] Script Date: 2 ...
- C语言的OOP实践（OOC）
OOC 面向对象 C 语言编程实践 - 文章 - 伯乐在线http://blog.jobbole.com/105105/ ---硬着头皮看完了,但是感觉还是抽象有不理解的地方,感觉用C实现OOP好难啊 ...
- Hihicoder 题目1 : Trie树（字典树，经典题）
题目1 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在编 ...
- 算法系列：XXX
转载自http://www.cnblogs.com/skynet/p/3372855.html 这次分享的宗旨是——让大家学会创建与使用静态库.动态库,知道静态库与动态库的区别,知道使用的时候如何选择 ...
- HDU5115 Dire Wolf(区间DP)
渐渐认识到区域赛更侧重的是思维及基本算法的灵活运用,而不是算法的量(仅个人见解),接下来要更多侧重思维训练了. 区间DP,dp[i][j]表示从i到j最终剩余第i 与第j只的最小伤害值,设置0与n+1 ...