1、html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./css/reset.css"/>
    <link rel="stylesheet" href="./css/animation.css"/>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <title>animation-css3动画</title>
</head>
<body>
<ul class="clear" id="animationlist">
    <li><span class="circle"></span><a href="#">首页</a></li>
    <li><span class="circle"></span><a href="#">待办文件</a></li>
    <li><span class="circle"></span><a href="#">已办文件</a></li>
    <li><span class="circle"></span><a href="#">访问记录</a></li>
</ul>
</body>
<script type="text/javascript" src="js/animation_oop.js"></script>
<script type="text/javascript">
    var ani = new Circleopa('animationlist','circle-opacity','#333','#2196f3');
    ani.init();
</script>
</html>

2、css：

ul{width: 300px;border: red;}
ul li{width: 300px;height: 70px;line-height: 70px;background: #fff;text-align: center;cursor: pointer;overflow: hidden;}
ul li a{font-weight: 900;}
ul li:hover a{
    color: #2196f3!important;
    /*animation: circle-opacity 0.5s linear 0s 1;*/
    /*-webkit-animation-fill-mode:forwards;让动画停在最后是这个属性，*/
    /*animation-fill-mode:forwards;*/
}
ul li a{position: relative;left: -50px;color: #333;top: -30px;}
.circle{background: transparent;border-radius: 50%;width: 70px;height: 70px;display: inline-block;margin: 0 auto;}

@keyframes circle-opacity{
    0% {
        background: rgba(192,225,250,0);
    }
    50% {
        transform:scale(4);
        background: rgba(192,225,250,1);
    }
    100% {
        transform:scale(16);
        background: rgba(192,225,250,0);
    }
}
@-webkit-keyframes circle-opacity{/*兼容chrome的动画帧设定，要用-webkit-animation属性调用*/
    0% {
        background: rgba(192,225,250,0);
    }
    50% {
        transform:scale(4);
        background: rgba(192,225,250,1);
    }
    100% {
        transform:scale(16);
        background: rgba(192,225,250,0);
    }
}

3、jsoop版——闭包，面向对象

/*
* 参数说明：
* context：上下文环境，字串形式是id，对象形式就是已经获取到的dom元素
* animationcss：css里面封装的动画样式类
* defaultcolor：默认列表项里面的字体颜色
* activecolor：滑过或点击后的字体样式值
*
* */

;(function(){
    function Circleopa(context,animationcss,defaultcolor,activecolor){
        this.context = typeof context == 'string'?document.getElementById(context) : context;
        this.animationcss = animationcss;
        this.defaultcolor = defaultcolor;
        this.activecolor = activecolor;
    }
    Circleopa.prototype = {
        init:function(){
            var that = this;//这个this必须写在这里，相对于init函数的子onclick回调函数才能引用的到
            var items = this.context.getElementsByTagName('li');
            for(var i = 0; i < items.length; i++){
                items[i].onclick = function(){//下面的事件中的this指向的是触发事件的源对象li元素
//                    alert(that);进来了
                    this.getElementsByTagName('span')[0].style.animation = that.animationcss+' 0.5s linear 0s 1';
                    this.getElementsByTagName('span')[0].style.webkitAnimation = that.animationcss+' 0.5s linear 0s 1';
                    this.getElementsByTagName('span')[0].style.animationFillMode = 'forwards';
                    $(this).siblings().children('a').css('color',that.defaultcolor);
                    $(this).children('a').css('color',that.activecolor);
                    that.clearAnimation(this);
                    //alert(this.getElementsByTagName('span')[0].getAttribute('class'));//弹出circle证明获取到了子元素span
                }
            }
        },
        clearAnimation:function(self){
            var sid = window.setInterval(function(){
                self.getElementsByTagName('span')[0].style.animation = '';
                self.getElementsByTagName('span')[0].style.webkitAnimation = '';
                self.getElementsByTagName('span')[0].style.animationFillMode = '';
                sid = window.clearInterval(sid);
            },500);
        }
    }
    window.Circleopa = Circleopa;
})(window);

css3实战版的点击列表项产生水波纹动画——之jsoop面向对象封装版的更多相关文章

  1. css3实战版的点击列表项产生水波纹动画

    1.html+js: <!DOCTYPE html><html><head lang="en">    <meta charset=&qu ...

  2. 自定义ListView适配器Adapter引用布局文件的情况下实现点击列表项时背景颜色为灰色

    listview控件设置适配器的时候,如果使用自定义的adapter,比如MyArrayAdapter extends ArrayAdapter<String> 如果listitem布局文 ...

  3. Flutter 实战（一）：列表项内容可自定义的列表组件

    前言 本篇文的目的是熟练掌握 Flutter 组件的封装,并且使用回调函数实现主要功能. 本组件的设计灵感来源于 Element 组件库的 table 组件. 正题 定义回调函数 在此之前,必须要了解 ...

  4. ListView控件的列表项的文字不满一行的时候，如何实现点击该列表项的空白区域仍可触发列表项的点击事件

    今天在做Demo的过程中,使用到了ListView.然而在实现过程中,发现一个出现了一个问题:只能点击列表项的文字区域可以触发点击事件,而点击列表项的空白区域无法触发点击事件. 如下图: listit ...

  5. Android学习笔记(23):列表项的容器—AdapterView的子类们

    AdapterView的子类的子类ListView.GridView.Spinner.Gallery.AdapterViewFlipper和StackView都是作为容器使用,Adapter负责提供各 ...

  6. Android之水波纹点击效果(RippleView)

    Android5.0后各种炫的效果纷纷出来,写这篇博客主要是讲的是按钮点击效果带有的水波纹(波浪式). 当然我写的这个是自定义来实现的,在低版本(5.0一下)也可以实现点击效果.看看效果图: 上图可看 ...

  7. android: Android水波纹点击效果

    Android API 21及以上新增了ripple标签用来实现水波纹的效果.我们可以通过设置ripple背景来实现一些View点击效果. 该水波纹效果有两种:一种是有界的(点击后类似于一个矩形向四周 ...

  8. Android点击列表后弹出输入框，所点击项自动滚动到输入框上方

    使用微信的朋友圈会发现,点击某一条评论后输入框会弹出来,然后所点击的那一项会自动地滚动到输入框上方的位置,这样如果开始所点击的评论在屏幕很下方的话,就不会被输入框遮住,虽然微信这一点在我的MX2频繁点 ...

  9. CSS3实战手册(第3版)(影印版)

    <CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...

随机推荐

  1. 转 :Vim文件编码识别与乱码处理

    Vim文件编码识别与乱码处理   在 Vim 中,有四个与编码有关的选项,它们是:fileencodings.fileencoding.encoding 和 termencoding.在实际使用中,任 ...

  2. 使用FusionCharts出柱状图和饼状图

    在最近的项目中,需要使用出图,能够查看柱状图,饼状图等效果,刚开始我们用JS写的效果,发现效果不理想,找了一个JS插件发现效果还是不理想,客户也不满意,客户希望要很炫的效果,最后我们使用了Fusion ...

  3. FragmentActivity与Fragment两者交互方法简介(转)

    FragmentActivity与Fragment两者交互方法简介 分类: Fragment 2014-07-07 18:17 88人阅读 评论(0) 收藏 举报 在Android4.0后很多时候我们 ...

  4. CentOS 6.2 安装vsftpd 服务器(转)

    CentOS 6.2 安装vsftpd 服务器 本人的CentOS 6.2是安装在win 2008 R2 server 的 Hyper-V 虚拟机中.centos使用光盘安装,以最小模式安装,完成后用 ...

  5. springMVC和json结合传递数据

    1. 新建web project 2. 增加jar 3. 改写web.xml <?xml version="1.0" encoding="UTF-8"?& ...

  6. 如何删除要素类 IFeatureWorkspace 接口介绍(1)

    如何删除要素类 要想删除一个要素类,那么必须先得到这个,在得到这个要素类的时候,我们要学习一个新的接口IFeatureWorkspace. IFeatureWorkspace  接口介绍 这个接口主要 ...

  7. linux commands ---2 ,学习vim编辑器如何使用的方法。

    vim /data/yst.txt   打开一个文件之后,然后在命令行模式下,输入:help 可以调出 vim 的帮助文档. 然后会进入: 然后就可以查阅具体的帮助文档了,再也不用再网上找一些零散的v ...

  8. extJS4.2.0 tabPanel学习（三）

    了解添加tab的函数 这里设置为自动添加,菜单是从后台获取的数据,前台进行双击的时候,添加tab页 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  9. BZOJ 2276 Temperature

    two-pointer型单调队列.... #include<iostream> #include<cstdio> #include<cstring> #includ ...

  10. FTP服务器配置部分

    构建基于虚拟用户的vsftpd服务器1.建立虚拟FTP用户的帐号数据库文件 (1) 建立虚拟用户的账户名.密码列表->奇数行为帐号名,偶数行为上一行中帐号的密码 (2) 转化为Berkeley ...