js动画--透明度变化

对于设置元素的透明度的变化。主要思想也是通过一个定时器来控制的。

此外对于透明度有一点要说明一下，就是在IE中我们在css中设置透明度的方式filter:alpha(opacity:value)其中value值从0~100;

在火狐中透明度可以通过opacity：value来设置，其中value=0~1.

代码如下：

html

<!DOCTYPE html>

<html>

<head>

<title>js动画事件</title>

<link href="move.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="move.js"></script>

</head>

<body>

<div id="div1">

</div>

</body>

</html>

css

*{

    margin:0px;

    padding:0px;

}

#div1{

    width:200px;

    height:200px;

    background-color:red;

    border:1px solid #eeddcc;

    opacity:0.3;

    filter:alpha(opacity:30);

}

var timer

window.onload=function(){

    var div1=document.getElementById("div1");

    div1.onmouseover=function(){

        startchange(100);

    };

    div1.onmouseout=function(){

        startchange(30);

    };

}

var alpha=30;

function startchange(value){

    var div1=document.getElementById("div1");

    clearInterval(timer);

        var speed=0;

    if(value>alpha){

            speed=10;

        }else if(value<alpha){

            speed=-10;

        }

    timer=setInterval(function(){

        if(value==alpha){

            clearInterval(timer);

        }else{

            alpha+=speed;

            div1.style.filter='alpha(opacity:'+alpha+')';//这个地方的书写千万要注意了！！！，这是支持IE方式的

            div1.style.opacity=alpha/100;//这里要除以100，将opacity的值降到0~1之间，这是支持火狐方式的。

        }

    },50)

}

巴特西

js动画--透明度变化

最新文章

热门文章