关闭

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

标签: javascript
88人阅读 评论(0) 收藏 举报
分类:
<!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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1622次
    • 积分:143
    • 等级:
    • 排名:千里之外
    • 原创:13篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档