您的位置：首页 > Web前端 > JavaScript

点击元素使其在毫秒内从不透明变为透明

2016-05-30 20:53 615 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#ul1 li{
width: 250px;
height: 250px;
border: 1px solid #cccccc;
-moz-border-radius: 20px;      /* Gecko browsers */
-webkit-border-radius: 20px;   /* Webkit browsers */
border-radius:20px;
float: left;
list-style: none;
margin: 10px;

}
</style>
<script>
window.onload = function(){
//第一个参数为元素e
//第二个参数是函数，以e为参数，它将在动画结束时调用
//第三个参数是time，默认为500毫秒
function fadeOut(e,oncomplete,time){
if(e === "string") document.getElementById = 'e';
if(!time) time = 500;
//使用Math.sqrt 作为一个简单的“缓动函数”来创建动画
//精巧的非线性：一开始淡出的比较快，然后缓慢一些
var ease = Math.sqrt;
var start = (new Date()).getTime();
animate();

function animate(){

var elapsed = (new Date()).getTime() - start;
var fraction = elapsed/time;

if(fraction<1){
var opacity = 1-ease(fraction);
e.style.opacity = String(opacity);
//在25毫秒后或者在总时间的最后尝试再次运行函数
//目的是为了产生每秒40帧的动画
setTimeout(animate,Math.min(25,time-elapsed));
}else{
e.style.opacity = "0";                  //使e完全透明
if(oncomplete) oncomplete(e);           //调用完成后的回调函数
}
}
}

var oUl = document.getElementById('ul1');
var aLi = oUl.children;

var arr = ['black','#cccccc','#336666','khaki','#0099cc'];

for(var i =0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].style.background = arr[i%arr.length];
aLi[i].onclick = function(){
fadeOut(aLi[this.index])
}
}
}
</script>
</head>
<body>
<ul id="ul1">
<li id="li1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        #ul1 li{            width: 250px;            height: 250px;            border: 1px solid #cccccc;            -moz-border-radius: 20px;      /* Gecko browsers */            -webkit-border-radius: 20px;   /* Webkit browsers */            border-radius:20px;            float: left;            list-style: none;            margin: 10px;        }    </style>    <script>        window.onload = function(){            //第一个参数为元素e            //第二个参数是函数，以e为参数，它将在动画结束时调用            //第三个参数是time，默认为500毫秒            function fadeOut(e,oncomplete,time){                if(e === "string") document.getElementById = 'e';                if(!time) time = 500;                //使用Math.sqrt 作为一个简单的“缓动函数”来创建动画                  //精巧的非线性：一开始淡出的比较快，然后缓慢一些                  var ease = Math.sqrt;                var start = (new Date()).getTime();                animate();                function animate(){                    var elapsed = (new Date()).getTime() - start;                    var fraction = elapsed/time;                    if(fraction<1){                        var opacity = 1-ease(fraction);                        e.style.opacity = String(opacity);                        //在25毫秒后或者在总时间的最后尝试再次运行函数                        //目的是为了产生每秒40帧的动画                        setTimeout(animate,Math.min(25,time-elapsed));                    }else{                        e.style.opacity = "0";                  //使e完全透明                          if(oncomplete) oncomplete(e);           //调用完成后的回调函数                     }                }            }            var oUl = document.getElementById('ul1');            var aLi = oUl.children;            var arr = ['black','#cccccc','#336666','khaki','#0099cc'];            for(var i =0;i<aLi.length;i++){                aLi[i].index = i;                aLi[i].style.background = arr[i%arr.length];                aLi[i].onclick = function(){                    fadeOut(aLi[this.index])                }            }        }    </script></head><body>    <ul id="ul1">        <li id="li1"></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>    </ul></body></html>
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                javascript
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航