文档章节

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
北京
前端工程师
Javascript 异步实现机制

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

木头先生
2017/12/11
0
0
Google Chrome浏览器开发人员工具

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

张悟空
2014/08/20
0
0
《Kotlin极简教程》第2章 快速开始:HelloWorld

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

程序员诗人
2017/06/08
0
0
React Native实现js调用安卓原生代码

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011068702/article/details/82719163 1 问题 实现js调用安卓原始代码,直接上代码,简单粗暴 2 代码实现 1) 实...

chenyu_insist
09/16
0
0
解决使用 Jinja2 插入 JSON 数据时出现的乱码

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

cometeme
08/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
41
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
34
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
43
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
34
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
43
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部