文档章节

javascript 模块点击抖动之后变为透明

激烈的海胆
 激烈的海胆
发布于 2016/06/08 19:27
字数 605
阅读 10
收藏 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(){
            function shake(e,oncomplete,distance,time){
                if(e==="string") e = document.getElementById(e);
                if(!distance) distance = 5;
                if(!time) time = 500;

                var originalStyle = e.style.cssText;            //保存e的原始style
                e.style.position = "relative";                  //使e相对定位
                var start = (new Date()).getTime();             //动画的开始时间
                animate();                                      //动画开始

                //函数检查消耗的时间,更新e的位置
                //动画完成将e还原成原始状态
                //否则,更新e的位置,安排它自身重新运作
                function animate(){
                    var now = (new Date()).getTime();           //得到当前时间
                    var elapsed = now - start;                  //从开始以来消耗了多长时间
                    var fraction = elapsed/time;                //是总时间的几分之几
                    if(fraction<1){
                        //作为动画完成比例的函数,计算e的x位置
                        //使用正玄函数将完成的比例乘以4PI
                        //所以它来回往复两次
                        var x = distance*Math.sin(fraction*4*Math.PI);
                        e.style.left = x +"px";

                        //在25毫秒后或者在总时间的最后再次尝试运行函数
                        //目的是为了产生每秒40帧的动画
                        setTimeout(animate,Math.min(25,time-elapsed));
                    }else{                  //否则动画完成
                        e.style.cssText = originalStyle;
                        if(oncomplete) oncomplete(e);           //调试完成后的回调函数

                    }
                }
            }

            function fadeOut(e,oncomplete,time){
                if(e === "string") document.getElementById = 'e';
                if(!time) time = 500;

                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);            //改变e的透明度
                        setTimeout(animate,Math.min(25,time-elapsed));
                        //在25毫秒后或者在总时间的最后再次尝试运行函数
                        //目的是为了产生每秒40帧的动画
                    }else{
                        e.style.opacity = "0";                        //完全透明
                        if(oncomplete) oncomplete(e);                 //调试完成后的回调函数
                    }
                }
            }

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

            var arr = ['black','#cccccc','#336666','khaki','#0099cc'];
            //通过取模让每个li背景颜色不一样
            for(var i =0;i<aLi.length;i++){
                aLi[i].index = i;
                aLi[i].style.background = arr[i%arr.length];
                aLi[i].onclick = function(){
                    shake(aLi[this.index],fadeOut)
                }
            }
        }
    </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
博文 25
码字总数 7600
作品 0
北京
前端工程师
私信 提问
如何配置透明发光的骚气 vscode —— Jinkey 原创

1 安装自定义 JS 和 CSS 插件 2 安装发光主题 3 添加样式配置文件 在 VSCode 安装目录(自己随便选择一个文件夹也可以),放入以下文件。 为了方便下载,文件整理到了 Github-Jinkeycode/vs...

Jinkey
05/15
0
0
Google Chrome浏览器开发人员工具

准备工作 要开始使用开发人员工具,请先下载 Google Chrome 浏览器。在浏览器安装完成后,您可以打开自己感兴趣的网页或网络应用程序,然后通过下面任何一种方式进入开发人员工具: l 点击位...

张悟空
2014/08/20
91
0
Javascript 异步实现机制

Javascript 单线程指的是在一个浏览器进程中只存在一个 Javascript 执行线程,所以任务需要顺序排列等待执行,而不能像 Java 等多线程语言一样并发执行。但是这种单线程模型在处理耗时的异步...

木头先生
2017/12/11
0
0
《Kotlin极简教程》第2章 快速开始:HelloWorld

第2章 快速开始:HelloWorld 《Kotlin极简教程》正式上架: 点击这里 > 去京东商城购买阅读 点击这里 > 去天猫商城购买阅读 非常感谢您亲爱的读者,大家请多支持!!!有任何问题,欢迎随时与...

程序员诗人
2017/06/08
0
0
解决使用 Jinja2 插入 JSON 数据时出现的乱码

之前在用 flask 搭建一个网页时,我想要在模版中传入一个 JSON 的字符串,结果发现通过 Jinja2 传入的 JSON 数据变成了了乱码。其中的引号和空格都变为了 的形式: 传入之后: 在一番检索后,...

cometeme
2018/08/19
256
0

没有更多内容

加载失败,请刷新页面

加载更多

Excel多列快速填充

1.在验房工作中需快速的填充未完整填充的区域: ·选中需要填充的所有区域------>Ctrl+G快捷键:调出定位面板--------->设置定位空值:定位到所有空格 ·在公式编辑栏里输入活动单元格上面的...

东方墨天
2分钟前
2
1
提炼问题域

2.1 知识提炼与协作 知识提炼是从问题域中提炼出相关信息的技术,其目的是构建能够满足业务用例需求的有用模型。 知识提炼是为技术团队在基于一组需求为问题域设计解决方案时弥补所欠缺的知识...

细节探索者
2分钟前
1
0
redis是单线程,为什么那么快

完全基于内存,绝大部分请求是纯粹的内存操作,非常快速。 数据结构简单,对数据操作也简单,Redis 中的数据结构是专门进行设计的。 采用单线程,避免了不必要的上下文切换和竞争条件,也不存...

DustinChan
9分钟前
3
0
响应式布局

一、响应式布局 Responsive web page响应式布局/自适应网页 可以根据浏览器设备不同(pc,pad,phone)而自动的更改布局,图片,文字效果,不会影响用户体验 二、响应式布局必须做到 1、布局...

wytao1995
22分钟前
3
0
在Linux下使用linuxdeployqt发布Qt程序

目录 一、简介 二、安装linuxdeployqt 三、配置 qt 的环境变量 四、打包应用程序 五、编写linux桌面图标启动(可选步骤) 六、编写开机脚本 runApp.sh 七、打包成deb包 八、扩展 回到顶部 一...

shzwork
33分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部