首页 > 代码库 > 透明度动画

透明度动画

2024-08-14 17:36:34   219人阅读

转载 自 http://www.cnblogs.com/yuaima/p/5113553.html

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

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

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

代码如下：

html

<!DOCTYPE html><html><head><title>js动画事件</title><link href="http://www.mamicode.com/move.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="http://www.mamicode.com/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);}

js

var timerwindow.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=http://www.mamicode.com/=alpha){>

透明度动画


联系
我们