码迷,mamicode.com
首页 > 其他好文 > 详细

透明度动画

时间:2016-09-25 18:57:15      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

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

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

此外对于透明度有一点要说明一下,就是在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);
}
技术分享

js

技术分享
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)
}

透明度动画

标签:

原文地址:http://www.cnblogs.com/eat-too-much/p/5906300.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!