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

序言：之前有很多时候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*/

 

posted @ 2017-03-20 18:57  逗伴不是瓣  阅读(968)  评论(0)  编辑  收藏  举报