透明度的变化

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>动画透明度</title>

	<style>

		.animation{

			background-color: green;

			height: 100px;

			width: 100px;

            filter:alpha(opacity:30);

            opacity: 0.3;

		}

	</style>

</head>

<body>

	<div id="test" class="animation">animation</div>

</body>

 <script type="text/javascript">

    window.onload = function(){

    	var test = document.getElementById("test"),

            timer = null,

            alpha = 30;

        test.onmouseover = function(){

            startAnimation(100);

        }

        test.onmouseout = function(){

            startAnimation(30);

        }

        function startAnimation (alphaTarget) {

            clearInterval(timer);

            timer = setInterval(function(){

                if (alphaTarget == alpha) {

                    clearInterval(timer);

                    return;

                };

                if(alphaTarget > alpha){

                    alpha += 1;

                    test.style.filter = 'alpha(opacity:'+alpha+')';

                    test.style.opacity = alpha/100;

                }else{

                    alpha -= 1;

                    test.style.filter = 'alpha(opacity:'+alpha+')';

                    test.style.opacity = alpha/100;

                }

            },100)

        }

    }

 </script>

</html>

　　大家可以看到test.style.filter='alpha(opacity:100)'这个是IE的方式

test.style.opacity是DOM浏览器的方式。

js动画之简单运动二的更多相关文章

  1. js动画之简单运动一

    虽然现在css3已经有了很多动画效果希望后面有时间也写一些博客,但是先开始我们的基础动画的学习. 1.制作动画常用的属性就是left,right,height,width,opacity等属性 2.因 ...

  2. js动画---多物体运动

    对于多物体运动和单个物体运动来说,没有特别大的区别,实现原理基本上是一样的,都是通过定时器来实现的,但是多物体有一些地方需要注意,具体哪些需要注意,我将在下面的程序中说明. 首先,我们需要建立几个li ...

  3. js动画之链式运动

    链式运动就是当一个运动完,又启动另外一个运动,这个怎么实现呢?这里我们是用用回调函数实现一套链式动画 显示给div左移100像素,然后然后透明度变100 <!DOCTYPE html> & ...

  4. js动画之缓冲运动

    缓冲运动就是运动的速度与时间或者距离有关联,不是一般的匀速运动 <!DOCTYPE html> <html lang="en"> <head> ...

  5. js动画之同时运动

    一个物体可以同时做多个运动,而不是完成一个运动再一个运动,而是让你感觉他们是同时发生的. 直接上代码 <!DOCTYPE html> <html lang="en" ...

  6. js动画--链式运动

    前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成. 对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数. var timer; window.onloa ...

  7. Web高性能动画及渲染原理（1）CSS动画和JS动画

    目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...

  8. js动画学习（二）

    四.简单动画之缓冲运动 实现速度的缓冲,即不同位置的速度不同,越靠近目标值速度越小,所以速度值与目标值与当前值之差成正比.这里要注意一个问题就是物体在运动中速度是连续变化的,不是按照整数变化的,当物体 ...

  9. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

随机推荐

  1. printk函数日志级别的设置【转】

    本文转载自: 下面执行cat /proc/sys/kernel/printk 打印出的四个数字分别代表: 控制台日志级别.默认的消息日志级别.最低的控制台日志级别和默认的控制台日志级别 只有当prin ...

  2. HTML 5 的data-* 自定义属性

    HTML 5 增加了一项新功能是 自定义数据属性 ,也就是  data-* 自定义属性.在HTML5中我们可以使用以 data- 为前缀来设置我们需要的自定义属性,来进行一些数据的存放.当然高级浏览器 ...

  3. Android Layout XML属性

    转载自并做少量添加:http://www.cnblogs.com/playing/archive/2011/04/07/2008620.html Layout对于迅速的搭建界面和提高界面在不同分辨率的 ...

  4. Java 泛型和通配符解惑

    转自:http://www.linuxidc.com/Linux/2013-10/90928.htm T  有类型 ?  未知类型 一.通配符的上界 既然知道List<Cat>并不是Lis ...

  5. U9单据UI开发--单据类型UI开发

    1.在解决方案下新建UI界面项目,命名以UI作为后缀 2.先删除系统默认新建的UI界面数据模型,并新建界面数据 3.新建单据类型UIModel(界面数据),以model作为界面数据后缀名 4.修改单据 ...

  6. PHP下拉框内容随单选框内容变化

    这久在修改一个项目的小东西,要求把下拉框改为单选框,由于代码封闭,修改不了获取函数,所以想了个办法让下拉框的内容随单选框的内容变化,下面把代码分享给大家: <!DOCTYPE html PUBL ...

  7. jQuery核心之DOM操作的常用方法

    参考jQuery官网API文档 1..attr() 获取 :  ); 3.选择器与常用方法: ) .html( "new text for the third h3!" ) .en ...

  8. Sealed密封类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; #region 概述 //在 ...

  9. combobox获取值

    easyui-combobox是组合框 ,既可以输入,也可以选择 获取的数据是json格式的  [{"id":"001","text":&q ...

  10. 转：已知2个整形数据a,b.不使用if,?:以及其他任何条件判断的语法，找出a跟b中数据的大者。

    答案: int max(int a,int b){return (a+b+abs(a-b))/2;} 类似的 请定义一个宏,比较两个数a.b的大小,不能使用大于.小于.if语句 答案: #define ...