透明度的变化

<!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. Firefox刷新页面和复选框的奇葩问题

    Firefox刷新页面后数据还在,估计很多人都碰到过. 但是有一个奇怪的地方就是复选框,如果你默认是勾选了,然后访问者取消勾选,刷新完之后,还是没有勾选,这是为什么? Firefox奇葩的地方就在于c ...

  2. [6] 智能指针boost::weak_ptr

    [1]boost::weak_ptr简介 boost::weak_ptr属于boost库,定义在namespace boost中,包含头文件 #include<boost/weak_ptr.hp ...

  3. Mac下安装LNMP(Nginx+PHP5.6)环境

    [转自:http://avnpc.com/pages/install-lnmp-on-osx] 安装Homebrew 最近工作环境切换到Mac,所以以OS X Yosemite(10.10.1)为例, ...

  4. LR常见问题

    (1)LoadRunner录制脚本不弹出IE浏览器 当一台主机上安装多个浏览器时,LoadRunner录制脚本经常遇到打不开浏览器的情况,可以用下面的方法解决.启动浏览器,打开Internet选项对话 ...

  5. Script循环语句 的相关知识跟练习

    循环语句有两种问题类型:穷举和迭代 穷举: 在不知道什么情况下才是我们需要的结果的时候,只能让它一个一个的都执行一遍 迭代:在现有的条件下,根据规律,不断求解中间情况,最终推选出结果 两个关键词 br ...

  6. 2015弱校联盟(1) - C. Censor

    C. Censor Time Limit: 2000ms Memory Limit: 65536KB frog is now a editor to censor so-called sensitiv ...

  7. Balanced Lineup(树状数组 POJ3264)

    Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 40493 Accepted: 19035 Cas ...

  8. 提高mysql插入性能

    参考地址:http://blog.jobbole.com/29432/ 参数优化: 1. SQL语句是有长度限制,在进行数据合并在同一SQL中务必不能超过SQL长度限制,通过max_allowed_p ...

  9. CentOS 7安装Mysql并设置开机自启动

    CentOS 7不带Mysql数据库了,默认的数据库是MariaDB(Mysql的一个分支). 可以按照以下步骤手动安装Mysql数据库. 1. 下载rpm安装文件 wget http://repo. ...

  10. 从零开始CSS（一 2016/9/21）

    1.基础语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {declaration1; declaration2; ... declarationN } 选择器通 ...