点击元素使其在毫秒内从不透明变为透明
<!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
个人分类: javascript
想对作者说点什么? 我来说一句

透明对话框

2014年04月01日 136KB 下载

WPF Button 实现透明按钮样式

yb305 yb305

2015-02-06 16:23:53

阅读数:3126

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭