您的位置：首页 > Web前端 > CSS

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

2016-05-11 20:16 525 查看

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);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航