コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > myFocus library_javascript スキルに基づいてさまざまな機能のタブ切り替え効果を JS で実装します

myFocus library_javascript スキルに基づいてさまざまな機能のタブ切り替え効果を JS で実装します

WBOY
リリース： 2016-05-16 15:38:37
オリジナル
1445 人が閲覧しました

この記事の例では、myFocus ライブラリに基づいて JS によって実装されたさまざまな関数のタブ切り替え効果について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

ここでは、myFocus ライブラリをベースにしたさまざまなフォーカス マップ スタイルのスキンと、必要に応じてさまざまな機能のタブ切り替えを実現する myFocus-tab の使用方法を紹介します。ご自由に使用して、作者の関連情報を保管してください。 ^^

実行中のエフェクトのスクリーンショットは次のとおりです:

オンライン デモのアドレスは次のとおりです:

http://demo.jb51.net/js/2015/js-myfocus-plug-tab-cha-nav-codes/

具体的なコードは次のとおりです: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>myFocus-tab 各种功能的选项卡切换</title>
<style type="text/css">
* { margin:0; padding:0; border:0; list-style:none; }
body { background:#fff; padding:20px; font:1em Verdana, Geneva, sans-serif; }
.box { float:left; margin-right:20px; }
.box h4 { color:#c00; line-height:30px; font-size:12px; }
.tip { border:1px solid #dedede; margin-top:20px; }
.tip p { height:30px; line-height:30px; padding-left:16px; background:#f1f1f1; }
.tip pre { background:##AFF8AB; }
.tip2 { font-size:12px; color:#888; margin-top:16px; }
.mF_tab { width:426px; height:90px; margin-left:16px; }
.mF_tab .btn { position:absolute; top:0; left:0; z-index:2; }
.mF_tab .btn li { float:left; width:80px; height:26px; line-height:26px; text-align:center; margin-right:2px; border:1px solid #dedede; border-bottom:0; cursor:pointer; background:#f1f1f1; }
.mF_tab .btn li.current { height:27px; background:#fff; }
.mF_tab .cont { position:absolute; top:27px; left:0; border:1px solid #dedede; overflow:hidden; }
.mF_tab .cont .swt { position:absolute; left:0; top:0; }
.mF_tab .cont .swt li p { padding:16px; }
</style>
<script type="text/javascript">
var myFocus={
  $:function(id){return document.getElementById(id);},
  $$:function(tag,obj){return (typeof obj=='object'&#63;obj:this.$(obj)).getElementsByTagName(tag);},
  $$_:function(tag,obj){
    var arr=[],n=0,a=obj.getElementsByTagName(tag);
    for(var i=0;i<a.length;i++){
    arr.push(a[i]);
    if(a[i].getElementsByTagName(tag).length){n=a[i].getElementsByTagName(tag).length}
    i=i+n;n=0;
    } return arr;
  },
  $li:function(obj,n){return this.$$_('li',this.$$_('ul',obj)[n])},
  linear:function(t,b,c,d){return c*t/d + b;},
  easeIn:function(t,b,c,d){return c*(t/=d)*t*t*t + b;},
  easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t - 1) + b;},
  easeInOut:function(t,b,c,d){return ((t/=d/2) < 1)&#63;(c/2*t*t*t*t + b):(-c/2*((t-=2)*t*t*t - 2) + b);},
  style:function(obj,style){return obj['offset'+style.replace(/^(.)/,new Function('return arguments[1].toUpperCase()'))];},
  opa:function(obj,v){
    if(v!=undefined) {v=v>100&#63;100:(v<0&#63;0:v); obj.style.filter = "alpha(opacity=" + v + ")"; obj.style.opacity = (v / 100);}
    else return (!+[1,])&#63;((obj.filters.alpha)&#63;obj.filters.alpha.opacity:100):((obj.style.opacity)&#63;obj.style.opacity*100:100);
  },
  animate:function(obj,prop,val,spd,type,fn){
    var opa=prop=='opacity'&#63;true:false;
    if(opa&&obj.style.display=='none'){obj.style.display='';this.opa(obj,0);}
    var t=0,b=opa&#63;this.opa(obj):parseInt(this.style(obj,prop)),c=val-b,d=spd||50,st=type||'easeOut',m=c>0&#63;'ceil':'floor';
    if(obj[prop+'Timer']) clearInterval(obj[prop+'Timer']);
    obj[prop+'Timer']=setInterval(function(){
      if(opa&&t<d){myFocus.opa(obj,Math[m](myFocus[st](++t,b,c,d)));}
      else if(!opa&&t<d){obj.style[prop]=Math[m](myFocus[st](++t,b,c,d))+'px';}
      else {if(opa&&val==0){obj.style.display='none'}clearInterval(obj[prop+'Timer']);fn&&fn.call(obj);}
    },10);return this;
  },
  fadeIn:function(obj,speed,fn){this.animate(obj,'opacity',100,speed==undefined&#63;20:speed,'linear',fn);return this;},
  fadeOut:function(obj,speed,fn){this.animate(obj,'opacity',0,speed==undefined&#63;20:speed,'linear',fn);return this;},
  slide:function(obj,params,speed,easing,fn){for(var p in params) this.animate(obj,p,params[p],speed,easing,fn);return this;},
  stop:function(obj){
    var animate=['left','right','top','bottom','width','height','opacity'];
    for(var i=0;i<animate.length;i++) if(obj[animate[i]+'Timer']) clearInterval(obj[animate[i]+'Timer']);
    return this;
  },
  initCSS:function(p){
    var css=[],oStyle = document.createElement('style');oStyle.type='text/css';
    if(p.width){css.push('.'+p.style+' *{margin:0;padding:0;border:0;list-style:none;}.'+p.style+'{position:relative;width:'+p.width+'px;height:'+p.height+'px;overflow:hidden;font:12px/1.5 Verdana,Geneva,sans-serif;background:#fff;}.'+p.style+' .loading{position:absolute;z-index:9999;width:100%;height:100%;color:#666;text-align:center;padding-top:'+0.3*p.height+'px;background:#fff}.'+p.style+' .txt li,.'+p.style+' .txt li span,.'+p.style+' .txt-bg{width:'+p.width+'px;height:'+p.txtHeight+'px;line-height:'+p.txtHeight+'px;overflow:hidden;}')}
    if(oStyle.styleSheet){oStyle.styleSheet.cssText=css.join('');} else {oStyle.innerHTML=css.join('');}
    var oHead = this.$$('head',document)[0];oHead.insertBefore(oStyle,oHead.firstChild);
  },
  setting:function(par){
    if(window.attachEvent){(function(){try{myFocus.$(par.id).className=par.style;myFocus.initCSS(par);}catch(e){setTimeout(arguments.callee,0);}})();window.attachEvent('onload',function(){myFocus[par.style](par)});}
    else{document.addEventListener("DOMContentLoaded",function(){myFocus.$(par.id).className=par.style;myFocus.initCSS(par);},false);window.addEventListener('load',function(){myFocus[par.style](par)},false);}
  },
  addList:function(obj,cla){
    var s=[],n=this.$li(obj,0).length,num=cla.length;
    for(var j=0;j<num;j++){
      s.push('<ul class='+cla[j]+'>');
      for(var i=0;i<n;i++){s.push('<li>'+(cla[j]=='num'&#63;('<a>'+(i+1)+'</a>'):(cla[j]=='txt'&#63;this.$li(obj,0)[i].innerHTML.replace(/\>(.|\n|\r)*&#63;(\<\/a\>)/i,'>'+(this.$$('img',obj)[i]&#63;this.$$('img',obj)[i].alt:'')+'</a>'):(cla[j]=='thumb'&#63;'<img src='+(this.$$('img',obj)[i].getAttribute("thumb")||this.$$('img',obj)[i].src)+' />':'')))+'<span></span></li>')};
      s.push('</ul>');
    }; obj.innerHTML+=s.join('');
  },
  switchMF:function(fn1,fn2){
    return "box.removeChild(this.$$('div',box)[0]);var run=function(idx){("+fn1+")();if (index == n - 1) index = -1;var next = idx != undefined &#63; idx: index + 1;("+fn2+")();index=next;};run(index);if(par.auto!==false) var auto=setInterval(function(){run()},t);box.onmouseover=function(){if(auto) clearInterval(auto);};box.onmouseout=function(){if(auto) auto=setInterval(function(){run()},t);}"
  },
  bind:function(arrStr,type,delay){
    return "for (var j=0;j<n;j++){"+arrStr+"[j].index=j;if("+type+"=='click'){"+arrStr+"[j].onmouseover=function(){if(this.className!='current') this.className='hover'};"+arrStr+"[j].onmouseout=function(){if(this.className=='hover') this.className=''};"+arrStr+"[j].onclick=function(){if(this.index!=index) run(this.index)};}else if("+type+"=='mouseover'){"+arrStr+"[j].onmouseover=function(){var self=this;if("+delay+"==0){if(!self.className) run(self.index)}else "+arrStr+".d=setTimeout(function(){if(!self.className) run(self.index)},"+(delay==undefined&#63;100:delay)+")};"+arrStr+"[j].onmouseout=function(){clearTimeout("+arrStr+".d)};}else{alert('myFocus 不支持这样的事件 \"'+"+type+"+'\"');break;}}"
  },
  extend:function(fnObj){for(var p in fnObj) this[p]=fnObj[p];}
};
myFocus.extend({
  mF_tab:function(par){
    var box=this.$(par.id);
    this.$$('ul',box)[1].innerHTML='<li><ul class=swt>'+this.$$('ul',box)[1].innerHTML+'</ul></li>';
    var btn=this.$li(box,0),wrap=this.$$('ul',box)[1],swt=this.$$('ul',box)[2],cont=this.$$_('li',swt);
    var index=par.index||0,n=btn.length,t=par.time*1000;
    swt.style.width=n*par.width+'px';
    for(var i=0;i<n;i++) cont[i].style.cssText='width:'+par.width+'px;height:'+par.height+'px;float:left;';
    par.height=par.height=='auto'&#63;swt.offsetHeight:par.height;
    wrap.style.cssText='width:'+par.width+'px;height:'+par.height+'px;';
    box.style.cssText='width:'+(par.width+2)+'px;height:'+(par.height+29)+'px;';
    if(par.type=='fade'||par.type=='none'){for(var i=0;i<n;i++) cont[i].style.display='none';} 
    eval(this.switchMF(function(){
      btn[index].className='';
      if(par.type=='fade'||par.type=='none') cont[index].style.display='none';
    },function(){
      if(par.type=='slide') myFocus.slide(swt,{left:-(next*par.width)},20,'easeInOut')
      if(par.type=='fade') myFocus.fadeIn(cont[next]);
      if(par.type=='none') cont[next].style.display='';
      btn[next].className='current';
    }))
    eval(this.bind('btn','par.trigger',par.delay));
  }
})
var tabWrap=function(){myFocus.setting({
  style:'mF_tab',
  id:'tabWrap',
  trigger:'mouseover',
  type:'slide',
  auto:false,
  time:2,
  width:600,
  height:361
  });
}
var tabInner1=function(){myFocus.setting({
  style:'mF_tab',
  id:'tabInner1',
  trigger:'mouseover',
  type:'slide',
  auto:false,
  time:2,
  width:500,
  height:261
  });
}
var tabInner2=function(){myFocus.setting({
  style:'mF_tab',
  id:'tabInner2',
  trigger:'mouseover',
  type:'slide',
  auto:true,
  time:2,
  width:400,
  height:61
  });
}
if(!+[1,]){tabInner2();tabInner1();tabWrap();}
else{tabWrap();tabInner1();tabInner2();}
myFocus.setting({
  style:'mF_tab',
  id:'qqTab',
  trigger:'mouseover',
  type:'slide',
  auto:true,
  time:2,
  width:600,
  height:106
});
myFocus.setting({
  style:'mF_tab',
  id:'qqTabAuto',
  trigger:'mouseover',
  type:'fade',
  auto:false,
  time:2,
  width:600,
  height:'auto'
});
</script>
</head>
<body>
<div class="box">
 <h4>支持无限嵌套</h4>
 <div id="tabWrap">
 <div class="loading"><span>请稍候...</span></div>
 <!--载入画面-->
 <ul class="btn">
  <!--标题-->
  <li>朋友</li>
  <li>兄弟</li>
  <li>亲人</li>
  <li>情人</li>
 </ul>
 <ul class="cont">
  <!--内容-->
  <li>
  <p>朋友朋友朋友</p>
  <div id="tabInner1">
   <div class="loading"><span>请稍候...</span></div>
   <!--载入画面-->
   <ul class="btn">
   <!--标题-->
   <li>朋友</li>
   <li>兄弟</li>
   <li>亲人</li>
   <li>情人</li>
   </ul>
   <ul class="cont">
   <!--内容-->
   <li>
    <p>朋友朋友朋友</p>
    <div id="tabInner2">
    <div class="loading"><span>请稍候...</span></div>
    <!--载入画面-->
    <ul class="btn">
     <!--标题-->
     <li>朋友</li>
     <li>兄弟</li>
     <li>亲人</li>
     <li>情人</li>
    </ul>
    <ul class="cont">
     <!--内容-->
     <li>
     <p>朋友朋友朋友</p>
     </li>
     <li>
     <p>兄弟兄弟兄弟</p>
     </li>
     <li>
     <p>亲人亲人亲人</p>
     </li>
     <li>
     <p>情人情人情人</p>
     </li>
    </ul>
    </div>
   </li>
   <li>
    <p>兄弟兄弟兄弟</p>
   </li>
   <li>
    <p>亲人亲人亲人</p>
   </li>
   <li>
    <p>情人情人情人</p>
   </li>
   </ul>
  </div>
  </li>
  <li>
  <p>兄弟兄弟兄弟</p>
  </li>
  <li>
  <p>亲人亲人亲人</p>
  </li>
  <li>
  <p>情人情人情人</p>
  </li>
 </ul>
 </div>
</div>
<style>
.qqTab{margin-bottom:12px;}
.qqTab .btn li { background:#A1DEFE;border-color:#36BAF0; }
.qqTab .btn li.current { height:27px; background:#F9FEFF; }
.qqTab .cont{border-color:#36BAF0; }
.qqTab .list{float:left;overflow:hidden;text-align:center;margin:16px;margin-right:0;display:inline;}
.qqTab .list ul li{list-style:circle;}
.qqTab .left{width:150px;background:#1EB2EF;}
.qqTab .middle{width:236px;background:#D4F2FD;}
.qqTab .right{width:150px;background:#CE4982;}
</style>
<div class="box qqTab">
<h4>仿QQ今日要闻实例</h4>
<div id="qqTab">
 <div class="loading"><span>请稍候...</span></div>
 <!--载入画面-->
 <ul class="btn">
  <!--标题-->
  <li>新闻</li>
  <li>财经</li>
  <li>娱乐</li>
  <li>体育</li>
 </ul>
 <ul class="cont">
  <!--内容-->
  <li>
  <div class="list left">
    <ul>
     <li>新闻左列表</li>
    <li>新闻左列表</li>
    <li>新闻左列表</li>
    <li>新闻左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>新闻中列表</li>
    <li>新闻中列表</li>
    <li>新闻中列表</li>
    <li>新闻中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>新闻右列表</li>
    <li>新闻右列表</li>
    <li>新闻右列表</li>
    <li>新闻右列表</li>
   </ul>
  </div>
  </li>
  <li>
  <div class="list left">
    <ul>
     <li>财经左列表</li>
    <li>财经左列表</li>
    <li>财经左列表</li>
    <li>财经左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>财经中列表</li>
    <li>财经中列表</li>
    <li>财经中列表</li>
    <li>财经中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>财经右列表</li>
    <li>财经右列表</li>
    <li>财经右列表</li>
    <li>财经右列表</li>
   </ul>
  </div>
  </li>
  <li>
  <div class="list left">
    <ul>
     <li>娱乐左列表</li>
    <li>娱乐左列表</li>
    <li>娱乐左列表</li>
    <li>娱乐左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>娱乐中列表</li>
    <li>娱乐中列表</li>
    <li>娱乐中列表</li>
    <li>娱乐中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>娱乐右列表</li>
    <li>娱乐右列表</li>
    <li>娱乐右列表</li>
    <li>娱乐右列表</li>
   </ul>
  </div>
  </li>
  <li>
  <div class="list left">
    <ul>
     <li>体育左列表</li>
    <li>体育左列表</li>
    <li>体育左列表</li>
    <li>体育左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>体育中列表</li>
    <li>体育中列表</li>
    <li>体育中列表</li>
    <li>体育中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>体育右列表</li>
    <li>体育右列表</li>
    <li>体育右列表</li>
    <li>体育右列表</li>
   </ul>
  </div>
  </li>
 </ul>
 </div>
</div>
<div class="box qqTab">
<h4>支持高度自适应（auto）设置</h4>
<div id="qqTabAuto">
 <div class="loading"><span>请稍候...</span></div>
 <!--载入画面-->
 <ul class="btn">
  <!--标题-->
  <li>新闻</li>
  <li>财经</li>
  <li>娱乐</li>
  <li>体育</li>
 </ul>
 <ul class="cont">
  <!--内容-->
  <li>
  <div class="list left">
    <ul>
     <li>新闻左列表</li>
    <li>新闻左列表</li>
    <li>新闻左列表</li>
    <li>新闻左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>新闻中列表</li>
    <li>新闻中列表</li>
    <li>新闻中列表</li>
    <li>新闻中列表</li>
    <li>这是测试高度自适应</li>
    <li>这是测试高度自适应</li>
    <li>这是测试高度自适应</li>
    <li>这是测试高度自适应</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>新闻右列表</li>
    <li>新闻右列表</li>
    <li>新闻右列表</li>
    <li>新闻右列表</li>
   </ul>
  </div>
  </li>
  <li>
  <div class="list left">
    <ul>
     <li>财经左列表</li>
    <li>财经左列表</li>
    <li>财经左列表</li>
    <li>财经左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>财经中列表</li>
    <li>财经中列表</li>
    <li>财经中列表</li>
    <li>财经中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>财经右列表</li>
    <li>财经右列表</li>
    <li>财经右列表</li>
    <li>财经右列表</li>
   </ul>
  </div>
  </li>
  <li>
  <div class="list left">
    <ul>
     <li>娱乐左列表</li>
    <li>娱乐左列表</li>
    <li>娱乐左列表</li>
    <li>娱乐左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>娱乐中列表</li>
    <li>娱乐中列表</li>
    <li>娱乐中列表</li>
    <li>娱乐中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>娱乐右列表</li>
    <li>娱乐右列表</li>
    <li>娱乐右列表</li>
    <li>娱乐右列表</li>
   </ul>
  </div>
  </li>
  <li>
  <div class="list left">
    <ul>
     <li>体育左列表</li>
    <li>体育左列表</li>
    <li>体育左列表</li>
    <li>体育左列表</li>
   </ul>
  </div>
  <div class="list middle">
    <ul>
     <li>体育中列表</li>
    <li>体育中列表</li>
    <li>体育中列表</li>
    <li>体育中列表</li>
   </ul>
  </div>
  <div class="list right">
    <ul>
     <li>体育右列表</li>
    <li>体育右列表</li>
    <li>体育右列表</li>
    <li>体育右列表</li>
   </ul>
  </div>
  </li>
 </ul>
 </div>
</div>
</body>
</html>
ログイン後にコピー

この記事が皆さんの JavaScript プログラミングに役立つことを願っています。

関連ラベル：
js
ソース：php.cn
前の記事：jQuery HTML5 美ウォーターフォールフローレイアウトの実装方法_jquery 次の記事：replaceChild_javascript スキルに基づいて単純な嚥下特殊効果を作成する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
複数のルートで宣言されたワーカープールは、しきい値を気にせずに CPU 使用率を維持できますか CPU を集中的に使用するタスクを処理するワーカープールを備えた Node.js システムを見つけたいと考えていますが、複数のルートにわたる CPU 使用率については少し混乱してい...
から 2024-04-06 19:54:23
0
1
444
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
Nuxt.js で作成したダッシュボードをデプロイするには SSG を使用する必要がありますか? Nuxt.jsを使用して社内向けのダッシュボードを開発していきます。これは内部ダッシュボードであるため、ユニバーサル スキーマは必要ありません。通常、ほとんどのダッシュボードは S...
から 2024-04-06 13:17:44
0
1
493
Electron はプリロード時に AppData を取得します プリロードされた AppData ディレクトリを取得するにはどうすればよいですか? Background.js[...]asyncfunctioncreateWindow(){co...
から 2024-04-06 11:05:31
0
1
417
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート