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