您的位置：首页 > 其它

如何巧妙的用面向对象封装常用效果

2017-03-20 18:57 99 查看

序言：之前有很多时候PC端页面只有一些切换，悬停下拉效果，可能有多个！这时候可能会选jQuery，但是就这么几个简单的效果用jq有点浪费，所以用原生js，这时候又会又一堆的for循环。。。性能又不太好。

能不能简单封装一下，可以复用？答案是：肯定的~~

下面就是一个用构造函数实例化一个对象，用面向对象的思想实现的简单封装，最终效果

1 javscript

/**
* Created by jianfei on 2017/3/20.
*/
//1 定义构造函数,鼠标悬停下拉效果的封装，类似小插件，使用的时候直接new Overitrm(option);
//option={
//　　btn: id,被悬停元素的id
//　　item:id,被悬停按钮下要显示的下拉框的id
//　　addclass:被悬停按钮将要添加的className，可以自定义
//　}

function Overitem(option){
this.init(option);
}
Overitem.prototype={
init:function(option){
var _self=this;
_self.btn=document.getElementById(option.btn)||'';
_self.item=document.getElementById(option.item)||'';
_self.addclassname=option.addclass;
//2.0 绑定事件
_self.btn.onmouseover=_self.showitem.bind(_self);
_self.btn.onmouseout=_self.hideitem.bind(_self);
},
//2.1 定义事件
showitem:function () {
//如何让this指向new Overitem;，在调用的时候用bind把this绑定上去
this.btn.className=this.addclassname;
this.item.style.display='block';
},
hideitem:function () {
//如何让this指向new Overitem;，在调用的时候用bind把this绑定上去
this.btn.className='';
this.item.style.display='none';
}
};

/**
* Created by jianfei on 2017/3/20.
*/
//1定义构造函数
function Tabitem(option){
this.init(option);
}
Tabitem.prototype={
init:function(option){
var _self=this;
_self.btn=document.getElementsByClassName(option.btn)||'';
_self.item=document.getElementsByClassName(option.item)||'';
for(var i=0;i<_self.btn.length;i++){
_self.btn[i].index=i;
_self.btn[i].onmouseover=function(){
for(var j=0;j<_self.item.length;j++){
_self.btn[j].className=option.btn;
_self.item[j].className=option.item;
}
_self.btn[this.index].className=option.btn+' '+option.btnaddclass;
_self.item[this.index].className=option.item+' '+option.itemaddclass;
//console.log(this);
//console.log(_self);
};
}
}
};

2 html

<body>
<div class="view-page">
<!--鼠标悬停效果-->
<ul class="nav-bar">
<li><a href="/">学院首页</a></li>
<li id="navbtn-one" class="btns">
<a href="javascript:;">学院概况</a>
<ul class="experts-lists" id="navlist-one">
<li><a href="javascript:;">周芷若</a></li>
<li><a href="javascript:;">张无忌</a></li>
<li><a href="javascript:;">杨过</a></li>
<li><a href="javascript:;">齐天大圣</a></li>
</ul>
</li>
<li><a href="/">学院图书馆</a></li>
<li id="navbtn-two" class="btns">
<a href="javascript:;">金牌教授</a>
<ul class="experts-lists" id="navlist-two">
<li><a href="javascript:">周芷若</a></li>
<li><a href="javascript:">张无忌</a></li>
<li><a href="javascript:">杨过</a></li>
<li><a href="javascript:">齐天大圣</a></li>
</ul>
</li>
<li><a href="/">学院地址</a></li>
</ul>
</div>
<!--切换效果1-->
<div class="view-tab">
<div class="box">
<ul class="fl">
<li class="tabbtn on">天龙八部</li>
<li class="tabbtn">射雕英雄传</li>
<li class="tabbtn">倚天屠龙记</li>
<li class="tabbtn">乾坤大挪移</li>
<li class="tabbtn">天龙八部</li>
</ul>
<div class="tabmsg fr">
<div class="tabmsg_list block">1111111111</div>
<div class="tabmsg_list">2222222222</div>
<div class="tabmsg_list">3333333333</div>
<div class="tabmsg_list">4444444444</div>
<div class="tabmsg_list">5555555555</div>
</div>
</div>
</div>
<!--切换效果2-->
<div class="view-tab">
<div class="box">
<div class="tabmsg fl">
<div class="itemtwo block">1111111111</div>
<div class="itemtwo">2222222222</div>
<div class="itemtwo">3333333333</div>
<div class="itemtwo">4444444444</div>
<div class="itemtwo">5555555555</div>
</div>
<ul class="fr">
<li class="btntwo on">天龙八部</li>
<li class="btntwo">射雕英雄传</li>
<li class="btntwo">倚天屠龙记</li>
<li class="btntwo">乾坤大挪移</li>
<li class="btntwo">天龙八部</li>
</ul>
</div>
</div>
<script>
//1悬停效果一
var itemone=new Overitem({
btn:'navbtn-one',
item:'navlist-one',
addclass:'hover'
});
//2悬停效果2
var itemtwo=new Overitem({
btn:'navbtn-two',
item:'navlist-two',
addclass:'hover'
});
//1 切换一
var tabone=new Tabitem({
btn:'tabbtn',//切换按钮的classname
item:'tabmsg_list',//切换要显示的内容的classname
btnaddclass:'on',//切换按钮追加的classname控制选中的样式
itemaddclass:'block'//切换内容追加的classname,控制显示还是影藏
});
//2切换二
var tabtwo=new Tabitem({
btn:'btntwo',
item:'itemtwo',
btnaddclass:'on',
itemaddclass:'block'
});
</script>
</body>

3 css

/*reset*/
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
}

/*view-page*/
.view-page{
width: 100%;
height: 500px;
background: #ccc;
overflow: hidden;
}
.nav-bar:before,.nav-bar:after{
display: table;
content: '';
clear: both;
}
.nav-bar{
width: 900px;
margin: 0 auto;
background: purple;
}
.nav-bar>li{
float: left;
margin-left: 20px;
/**/
position: relative;
}
.nav-bar>li:hover,.nav-bar>li.hover{
background: #999;
}
.nav-bar>li>a{
display: block;
font-size: 16px;
color: #fff;
line-height: 60px;
padding: 0 20px;
}

/*-experts-lists-*/
.experts-lists{
position: absolute;
width: 100%;
top: 60px;
left: 0;
background: rgba(0,0,0,.4);
padding: 10px 0;
display: none;
}
.experts-lists li a{
display: block;
text-align: center;
line-height: 35px;
color: #fff;
font-size: 14px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
.experts-lists li a:hover{
color: purple;
}
/*view-tab*/
.fl{
float: left;
}
.fr{
float: right;
}
.view-tab{
width: 100%;
overflow: hidden;
height: 300px;
margin-top: 20px;
}
.box{
width: 800px;
overflow: hidden;
margin: 0 auto;
}
.box ul{
width: 150px;
}
.box ul li{
line-height: 40px;
background: #999;
text-align: center;
cursor: pointer;
}
.box ul li+li{
margin-top: 10px;
}
.box ul li:hover,
.box ul li.on{
background: purple;
}
/*tabmsg*/
.tabmsg{
width: 625px;
height: 240px;
position: relative;
}
.tabmsg_list,
.itemtwo{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: #ccc;
display: none;
}
.tabmsg_list.block,
.itemtwo.block{
display: block;
}
/*切换2*/

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

标签：

相关文章推荐

新的分享

章节导航