この記事では主にタブ切り替え効果、ホバー、水平線アニメーションの変位を実装するためのjQueryを紹介します。興味のある方はぜひ参考にしてください。
ホバリングと下の水平線アニメーションの変位を同時に実現します:
コード:
<sytle> *{margin:0;padding:0; } .box{position:relative;font-size:0;} .box span{display:inline-block;width:150px;height:40px;line-height:40px;text-align:center;background:#eee;font-size:16px;} .line{position:absolute;width:150px;height:3px;background:#059;left:0;bottom:0;} </style> <p class="box" id="switch"> <span class="current">新闻资讯</span> <span>公司动态</span> <p class="line"></p> </p> $(function(){ var $spans=$("#switch span"); $spans.click(function(){ $(this).addClass('current').siblings().removeClass('current'); var index=$spans.index(this); //$("#content .detail").eq(index).show().siblings().hide(); //$("#fr .bar").eq(index).show().siblings().hide(); }) $spans.mouseover(function(){ var index=$spans.index(this); var cName=$(this).attr("class"); if(cName!="current"){ if(index==0){ $('.line').animate({'left':'0px'},300); }else{ $('.line').animate({'left':'150px'},300); } } }) $spans.mouseout(function(){ var index=$spans.index(this); var cName=$(this).attr("class"); if(cName!="current"){ if(index==0){ $('.line').animate({'left':'150px'},300); }else{ $('.line').animate({'left':'0px'},300); } } }) })
関連する推奨事項:
JavaScript プラグインについて タブ タブの効果の共有
純粋な CSS3 を使用するタブオプションを実装する カード切り替えの例
以上がjqueryはタブ切り替え効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。