码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-05-11 21:53:20      阅读:257      评论:0      收藏:0      [点我收藏+]

标签:

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面向对象封装版

标签:

原文地址:http://www.cnblogs.com/koleyang/p/5483406.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!