透明度的变化

<!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. CentOS 6.4下编译安装 gcc-4.8.0（转）

    转:http://www.centoscn.com/image-text/install/2014/0807/3454.html 1.首先下载源代码 wget http://ftp.gnu.org/g ...

  2. pageX/Y, offset(), position(), scrollTop(), screenX/Y, clientX/Y, pageX/Y

    event.pageX get mouse position Description: The mouse position relative to the left edge of the docu ...

  3. [Linux] VIM 常用快捷键2

    如何使用MacVim 1.在插入模式之外 基本上来说,你应该尽可能少的呆在插入模式里面,因为在插入模式里面 VIM 就像一个“哑巴”编辑器一样.很多新手都会一直呆在插入模式里面,因为这样易于使用.但 ...

  4. Codeforces Round #231 (Div. 2) E.Lightbulb for Minister

    题意:有n个点,问在一个m边形内哪个点与这n个点的距离平方和最小 题解:(ai-a0)^2=ai*ai+a0*a0-a*ai*a0 合起来就是a1*a1+...+an*an+n*a0*a0-2*a0* ...

  5. 转义字符_MySQL识别下面的转义序列

    转义字符.MySQL识别下面的转义序列 在字符串中,某些序列具有特殊含义.这些序列均用反斜线('\')开始,即所谓的转义字符.MySQL识别下面的转义序列: \0 ASCII 0(NUL)字符. \' ...

  6. 异常问题解决Error:Execution failed for task ':app:processDebugManifest'

    Error:Execution failed for task ':app:processDebugManifest' www.MyException.Cn  网友分享于:2015-12-28  浏览 ...

  7. Beaglebone Black – 智能家居控制系统 LAS - 插座组装

    上一篇完成了服务端,这次是拼图的最后一块,插座. 插座一个,准备废掉它其中一个插头 预想电路草图 物料清单: 两路插座一个 继电器一个,3.3V 能驱动即可: 交流转直流 3.3V,我买了现成的模块: ...

  8. Code First Migrations更新数据库结构（数据迁移）

    背景 code first起初当修改model后,要持久化至数据库中时,总要把原数据库给删除掉再创建 (DropCreateDatabaseIfModelChanges),此时就会产生一个问题,当我们 ...

  9. gitlab open ssl

    cd /home/git/gitlab/ sudo -u git -H vi config/gitlab.yml sudo -u git -H vi /home/git/gitlab-shell/co ...

  10. 任意阶幻方（魔方矩阵）C语言实现

    魔方又称幻方.纵横图.九宫图,最早记录于我国古代的洛书.据说夏禹治水时,河南洛阳附近的大河里浮出了一只乌龟,背上有一个很奇怪的图形,古人认为是一种祥瑞,预示着洪水将被夏禹王彻底制服.后人称之为&quo ...