透明度的变化

<!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. animation 的属性一共有 6 个值，详细介绍在此

    animation 属性是一个简写属性,用于设置六个动画属性: animation-name animation-duration animation-timing-function animatio ...

  2. Oracle分组排序查询

    用sql查询每个分组中amount最大的前两条记录: SELECT *FROM HW trWHERE(SELECT COUNT(*) FROM HW WHERE tr.DEPID=DEPID AND ...

  3. 用NULL布局为什么不能显示

    import javax.swing.JComboBox;import javax.swing.JFrame;import javax.swing.JLabel;import javax.swing. ...

  4. 视频 之自定义VideoView

    package com.lvshandian.partylive.view;import android.content.Context;import android.util.AttributeSe ...

  5. Python namedtuple

    我们都知道Python中的tuple是一个非常高效的集合对象,但是我们只能通过索引的方式访问这个集合中的元素,比如下面的代码: Bob=('bob',30,'male') print'Represen ...

  6. 使用redis-dump进行Redis数据库合并

    前言 最近处理数据时,涉及到跨服务器访问的问题,我有两个Redis服务器分别在不同的机器上,给数据维护带来了诸多不便,于是便研究了下如何将两个Redis中的数据合并到一处. 从网站搜了一些工具,找到了 ...

  7. Django ModelForm and Form

    django表单系统中,所有的表单类都作为django.forms.Form的子类创建,包括ModelForm 关于django的表单系统,主要分两种 基于django.forms.Form 基于dj ...

  8. 阻抗计算公式、polar si9000(教程)

    给初学者的一直有很多人问我阻抗怎么计算的. 人家问多了,我想给大家整理个材料,于己于人都是个方便.如果大家还有什么问题或者文档有什么错误,欢迎讨论与指教!在计算阻抗之前,我想很有必要理解这儿阻抗的意义 ...

  9. Json不知道key值情况下获取第一个键值对

    JObject jsonData = new JObject(); jsonData.Add("1", "1"); jsonData.Add("2&q ...

  10. [php] php图表显示

    使用jpgragh绘制php图表, 下载地址http://jpgraph.net/download/ 1> 服务器环境centos6.5, php5.0. 2> linux环境下需要配置j ...