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

原创 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>

相关文章推荐

模拟 手机QQ 点击头部图片 使其变成半透明 使用一张图片实现此效果

package com.example.textviewpic;import android.content.Context;import android.graphics.Bitmap;import...

图片文字 点击效果半透明

  • 2014年06月19日 10:09
  • 1.15MB
  • 下载

qt 窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透

新博客地址:http://gorthon.sinaapp.com/ 【本文转载自http://shuizhuyuanluo.blog.163.com/blog/static/778181201222...
  • bh20077
  • bh20077
  • 2012年06月22日 21:34
  • 1889

点击后页面变灰色,并弹出透明浮动层的JavaScript

浮动层居中的对话框效果演示

VGScene 学习日志一:关于TvgScene设置为透明后,里面的按钮不能点击的问题记录

因工作需要,今天开始研究Delphi开发工具下的VGScene控件,首选 介绍一下VGScene:VGScene speeds the development of all graphical app...

移动端网页布局注意事项及解决 1.winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 <meta name="msapplication-tap-highlight" c

移动端网页布局注意事项及解决 1.winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉 1、关闭iOS键盘首字母自动大写 2、禁止文本缩...
  • lamenw
  • lamenw
  • 2017年06月01日 18:03
  • 845

Xamarin.iOS 点击UIView整体变透明(包括子控件)问题

Xamarin.iOS UIView点击空白区域,整个控件包括子控件都变透明的问题
  • geanwen
  • geanwen
  • 2016年12月06日 17:36
  • 1065

activity dialog 透明背景以及是否外部点击可以取消dialog

如题上图 自定义Dialog源码: private void initDialog() { LayoutInflater inflater = LayoutInfl...

QT窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透

qt 窗口置顶/真透明/背景模糊/非矩形/跳过任务栏分页器/无边框/无焦点点击/焦点穿透 窗口置顶 qt 里是 setWindowFlags(Qt::WindowStaysOnTopHin...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:点击元素使其在毫秒内从不透明变为透明
举报原因:
原因补充:

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