文档章节

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
Electron 2.0.2 发布,跨平台桌面应用开发工具

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

王练
05/25
0
0
局域网中使用Http透明代理替换文件下载

  假想我们在局域网内有一台机器,然后通过Http透明代理做些事情吧……   我们的步骤是在局域网内通过DHCP欺骗,并将DNS服务器指定到我们自己内网机器的IP(这里被攻击机器和代理机器为同一...

FreeBuf
05/11
0
0
[翻译]阮一峰webpack教程

翻译它主要是用于学习Webpack,原地址为github.com/ruanyf/webp… 安装使用指南 首先,全局安装Webpack和webpack-dev-server 然后克隆clone阮一峰的仓库 安装依赖 现在开始进入demo*目录并且...

爱吃叉烧
07/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

180.mariadb 主从复制

参考:https://blog.csdn.net/chengxuzaza/article/details/62042920 睡觉睡觉,明天写 1.效果 当主库中数据有变化的时候,从库就自动同步 2. 环境要求 至少两台 linux服务器 (教程:https...

Lucky_Me
2分钟前
0
0
erlng file id3v1 id3v1.1

%% ---%% Excerpted from "Programming Erlang",%% published by The Pragmatic Bookshelf.%% Copyrights apply to this code. It may not be used to create training material, %% ......

xueyuse0012
3分钟前
0
0
RabbitMq的安装

环境Centos6.5 32位 JDK 1.7.8 Jdk的卸载 rpm -qa|grep jdk yum –y remove 上边的安装包 JDK的安装 Rpm –ivh jdk安装包 配置环境变量 export JAVA_BIN=/usr/java/jdk1.7.0_80/bin export J......

DemonsI
7分钟前
0
0
http和https协议

HTTPS全称为Hypertext Transfer Protocol over Secure Socket Layer,中文含义为“超文本传输协议在安全加密字层”,简单来说就是加密数据传输,通俗的说就是安全连接。 HTTPS安全超文本传输...

寰宇01
13分钟前
0
0
vue内引入语音播报功能

在vue项目中引入语音播报,使用的科大讯飞语音接入, 具体思路为每次接收到语音信息后存入一个数组,然后监听这个数组,开始冲第一个索引播放,并且同时根据vuex getter 来动态删减数量 给a...

originDu
22分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部