文档章节

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

激烈的海胆
 激烈的海胆
发布于 2016/06/08 19:27
字数 605
阅读 9
收藏 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
北京
前端工程师
私信 提问
Google Chrome浏览器开发人员工具

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

张悟空
2014/08/20
0
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
0
0
Electron 2.0.2 发布,跨平台桌面应用开发工具

Electron v2.0.2 已发布,更新内容如下: 修复长抖动缓冲器延迟 #13009 记录在关机期间丢失的 quit 事件 #13026 更新 locale 文档 #13027 修复 崩溃的问题 #13022 修复大于 64x64 的无边框透...

王练
2018/05/25
2.1K
7

没有更多内容

加载失败,请刷新页面

加载更多

Cookie 显示用户上次访问的时间

import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.Cookie;import javax.servlet.http.HttpServlet;import javax.serv......

gwl_
今天
1
0
网络编程

第14天 网络编程 今日内容介绍  网络通信协议  UDP通信  TCP通信 今日学习目标  能够辨别UDP和TCP协议特点  能够说出UDP协议下两个常用类名称  能够说出TCP协议下两个常用类名称...

stars永恒
今天
1
0
二进制相关

二进制 众所周知计算机使用的是二进制,数字的二进制是如何表示的呢? 实际就是逢二进一。比如 2 用二进制就是 10。那么根据此可以推算出 5的二进制等于 10*10+1 即为 101。 在计算机中,负数以...

NotFound403
昨天
3
0
day22:

1、写一个getinterface.sh 脚本可以接受选项[i,I],完成下面任务: 1)使用格式:getinterface.sh [-i interface | -I ip] 2)当用户使用-i选项时,显示指定网卡的IP地址;当用户使用-I选项...

芬野de博客
昨天
2
0
Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现

自Spring Cloud Alibaba发布第一个Release以来,就备受国内开发者的高度关注。虽然Spring Cloud Alibaba还没能纳入Spring Cloud的主版本管理中,但是凭借阿里中间件团队的背景,还是得到不少...

程序猿DD
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部