js动画实现透明度动画

     在本次实例中，由于一般主流的浏览器对于透明度opacity最大值为1，但是在IE6最大值是100，此次例子是按主流浏览器的透明度来算的，所以定义的是小数，也可以定义为整数为单位，在运算的时候遇到主流的浏览器除以100就可以了。

实例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>透明度动画</title>
<style>
body,div{
    margin:0;
    padding:0;
    }
.opacity_move{
    height:200px;
    width:200px;
    background:#936;
    opacity:0.3;
    }
</style>
<script>
window.onload = function (){
    var div = document.getElementById('opacity_move');
    div.onmouseover = function (){
        opacity_move(0.1, 1);
        }
    div.onmouseout = function (){
        opacity_move(-0.1, 0.3);
        }
    }
var timer = null;
var opacity = 0.3;
function opacity_move(speed, target){
    var div = document.getElementById('opacity_move');
    clearInterval(timer);
    timer = setInterval(function(){
    if(opacity.toFixed(1) == target){//浮点数之间的运算存在误差，会有很多位的小数，所以在判断是否等于一时需要四舍五入来计算，并且保留一位小数。
        clearInterval(timer);
        }
    else{
            opacity += speed;
            div.style.filter = 'alpha(opacity:' + opacity + ')';
            div.style.opacity = opacity;    
        }
        }, 500);
    }
</script>
</head>

<body>
<div id="opacity_move" class="opacity_move"></div>
</body>
</html>

动画总结：

1.先设置一个定时器；

var timer = null;

2.清空定时器；

clrarInterval(timer);

3.打开定时器，并写功能；

timer = setInterval(function(){

　　/*功能*/

　　},1000);

4.判断相应条件关闭定时器。

timer = setInterval(function(){

　　if(/*条件*/){

　　　　clrarInterval(timer);

　　}

  　　else{

　　　　/*功能*/

　　   }

　　},1000);

posted @ 2015-12-29 18:21  纸鸢&红豆·绿豆  阅读(344)  评论(0)  编辑  收藏  举报