透明度的变化

<!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. jqueryui引用出错（base is not a constructor,widget no found）

    出错的原因,主要是引用顺序出错. 正确顺序如下: query本身必须放在第一位: <script src="../../../Scripts/Jquery1.7.2/jquery-1. ...

  2. Qt报表控件NCReport教程：报表创建示例

    NCReport是 一款10多年时间的老牌报表控件,最初是在2002年时作为qt3的应用程序的一个联合项目,后来就成为了一个独立的GPL项目.现在的NCReport 是一款轻量级.快速.多平台.简单易 ...

  3. android 内存处理工具

    1. LeakCanary 检查内存泄露 LeakCanary 是一个开源的在debug版本中检测内存泄漏的java库. 让我们来看看一个cait的例子: 1 2 3 4 5 6 7 8 9 10 1 ...

  4. 游戏引擎PushButtonEngine简介

    PushButtonEngine是一个开源的模块化游戏引擎,你可以通过https://github.com/PushButtonLabs/PushButtonEngine得到其代码和相关文档.下面我将 ...

  5. JAVA基础知识之JDBC——RowSet

    RowSet概念 在C#中,提供了一个DataSet,可以把数据库的数据放在内存中进行离线操作(读写),操作完成之后再同步到数据库中去,Java中则提供了类似的功能RowSet. RowSet接口继承 ...

  6. 微信小程序配置文件

    app.json   配置文件中不能有注释 { "pages": [ // 必填 设置页面路径 "pages/index/index", "pages ...

  7. HTTP协议的头信息详解

    转载地址:http://blog.csdn.net/guoguo1980/article/details/2649658 HTTP(HyperTextTransferProtocol)是超文本传输协议 ...

  8. 《BI那点儿事》数据流转换——模糊分组转换

    在模糊查找中我们提到脏数据是怎样进入到表中的事情,主要还是由于一些“Lazy-add”造成的.这种情况我们的肉眼很容易被欺骗,看上去是同一个单词,其实就差那么一个字母,变成了两个不同的单词.一个简单的 ...

  9. Android studio环境搭建

    首先要下载jdk,下载好以后配置环境变量,这里略过,不会的可以百度搜索,这里附上jdk下载地址:http://pan.baidu.com/s/1Xrmqy 下载Android studio 软件,下载 ...

  10. 百度地图 判断marker是否在多边形内

    昨天画了圆形,判marker是否存在圆形内.今天来画多边形,判断marker在多边形内. 需要引入一个js      <script type="text/javascript&quo ...