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

原创 2016年05月30日 20:53:02
<!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>

ie 透明元素遮挡的元素仍能响应鼠标事件

原文http://www.w3help.org/zh-cn/causes/BT9029 BT9029: 在 IE 中被透明元素遮挡的元素仍能响应鼠标事件 标准参考 • 问题描述 • 造成的...
  • qq_33950777
  • qq_33950777
  • 2017年12月27日 11:42
  • 40

iOS实现UIImageView透明区域点击事件穿透(OC&swift)

问题 最近要在iPad上实现一个很独特的功能,简单描述一下就是要显示一个带有半透明背景的弹出界面,在其上加一个不规则形状的图片,手指点击这个弹出界面的半透明区域就退出这个弹出界面。 问题是UED/...
  • songchunmin_
  • songchunmin_
  • 2016年04月25日 20:59
  • 1471

JavaFX透明窗口

今天在写自己的桌面小工具时,做了一个后台运行的周期性任务,想着每次任务完成时在桌面右下角显示一个文字提示。最终做出来Demo效果如下图,点击"显示提示"按钮,桌面右下角用绿色透明显示"显示提示信息成功...
  • alanzyy
  • alanzyy
  • 2015年11月14日 11:48
  • 4187

iOS实现UIImageView透明区域点击事件穿透

问题 最近要在iPad上实现一个很独特的功能,简单描述一下就是要显示一个带有半透明背景的弹出界面,在其上加一个不规则形状的图片,手指点击这个弹出界面的半透明区域就退出这个弹出界面。 问题是...
  • YUXIANG19876021
  • YUXIANG19876021
  • 2015年09月16日 15:18
  • 1504

如果要实现透明边框,子元素不透明

如果要实现透明边框,子元素不透明,那么就要用这个组合: {filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f0...
  • u014001717
  • u014001717
  • 2015年05月12日 11:36
  • 860

使Activity变为透明

Android设置Activity背景为透明style 标签: Activity背景透明android背景透明透明颜色transparent 2014-07-25 17:53 ...
  • xujiajian119
  • xujiajian119
  • 2017年01月10日 19:37
  • 131

Delphi中如何实现透明按钮 也可用于BCB

各位亲爱的读者,在delphi编程实战中我们可以使用按钮控件来制作程序中的按钮键。但是在使用其它软件时,我们常常可以看到透明按钮的效果。那么如何在delphi中实现透明按钮的效果?笔者在互联网搜索了不...
  • binnygoal
  • binnygoal
  • 2014年02月26日 10:18
  • 1094

图片去白边、使边界透明的实现和扩展

图片去白边、使边界透明的实现和需求扩展
  • lonelyrains
  • lonelyrains
  • 2013年07月04日 22:29
  • 6387

网页中通过swfobject插入Flash动画以及设置透明

前言今天在浏览网页时候,发现有的网站上既然可以在任意地方插入视频,且可以控制视频的显示范围,瞬间感觉效果还不错,经查看源代码,发现不过是在网站上嵌入flash动画而已,或是在flash中在动态引用外部...
  • hsd2012
  • hsd2012
  • 2016年06月12日 17:40
  • 1720

AS3 如何让鼠标不响应透明区域

废话不多说 ,直接上代码 /** * 单像素检测 * @return * */ public function hitTestPoint(dis:DisplayO...
  • gzyshengongshe
  • gzyshengongshe
  • 2014年08月28日 20:18
  • 1024
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:点击元素使其在毫秒内从不透明变为透明
举报原因:
原因补充:

(最多只允许输入30个字)