<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Tabs animation.</title> <style type="text/css"> body { font-family: "Helvetica",arial,sans-serif; } #wrap { width: 100%; float: left; overflow: hidden; z-index:0; } .admintabcontainer { width: 95%; margin: 5%; float: left; min-width:110px; overflow: hidden; transition: all ease-out 1s; -webkit-transition: all ease-out 1s; -moz-transition: all ease-out 1s; -o-transition: all ease-out 1s; } .admintabs, .expandadmintabs { float: left; width: 15%; margin: 2.5%; padding: 1.5%; text-align: center; box-shadow: inset 0 0 5px; overflow: hidden; min-width:100px; z-index: 1; cursor: pointer; color: #fff; transition: all ease-out 1s; -webkit-transition: all ease-out 1s; -moz-transition: all ease-out 1s; -o-transition: all ease-out 1s; } .adminactivetab { } .admintabs:nth-child(1), .admintabs:nth-child(1) * { background: #6cc655; } .admintabs:nth-child(2), .admintabs:nth-child(2) * { background: #21aabd; } .admintabs:nth-child(3), .admintabs:nth-child(3) * { background: #654b6b; } .admintabs:nth-child(4), .admintabs:nth-child(4) * { background: #bd2a4e; } .admintabs:nth-child(5), .admintabs:nth-child(5) * { background: #ff9d00; } .admintabs:nth-child(6), .admintabs:nth-child(6) * { background: #2189BD; } .admintabs:nth-child(7), .admintabs:nth-child(7) * { background: #BDBD21; } .admintabs:nth-child(8), .admintabs:nth-child(8) * { background: #BD5821; } .expandadmintabs { opacity: 0; margin: 0; position: absolute; overflow: hidden; z-index: -1; font-size:0; cursor: default; } .adminactivecontent { transition: all ease-out 1s; -webkit-transition: all ease-out 1s; -moz-transition: all ease-out 1s; -o-transition: all ease-out 1s; width: 60%; opacity: 1; font-size: 100%; } </style> </head> <body> <div id="wrap"> <div class="admintabcontainer"> <div class="admintabs"> <h3>Tab1</h3> <div class="expandadmintabs"> <h3>Tab1</h3> <p>Tab1 Contents here...</p> </div> </div> <div class="admintabs"> <h3>Tab2</h3> <div class="expandadmintabs"> <h3>Tab2</h3> <p>Tab2 Contents here...</p> </div> </div> <div class="admintabs"> <h3>Tab3</h3> <div class="expandadmintabs"> <h3>Tab3</h3> <p>Tab3 Contents here...</p> </div> </div> <div class="admintabs"> <h3>Tab4</h3> <div class="expandadmintabs"> <h3>Tab4</h3> <p>Tab4 Contents here...</p> </div> </div> <div class="admintabs"> <h3>Tab5</h3> <div class="expandadmintabs"> <h3>Tab5</h3> <p>Tab5 Contents here...</p> </div> </div> <div class="admintabs"> <h3>Tab6</h3> <div class="expandadmintabs"> <h3>Tab6</h3> <p>Tab6 Contents here...</p> </div> </div> <div class="admintabs"> <h3>Tab7</h3> <div class="expandadmintabs"> <h3>Tab7</h3> <p>Tab7 Contents here...</p> </div> </div> <div class="admintabs"> <h3>Tab8</h3> <div class="expandadmintabs"> <h3>Tab8</h3> <p>Tab8 Contents here...</p> </div> </div> </div> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".admintabcontainer .admintabs").click(function() { $("div").removeClass("adminactivetab"); $(this).addClass("adminactivetab"); $(".expandadmintabs").css("margin-left", "0"); adminaddcls(this, $(this).index()); var width = $('.admintabcontainer').width(); var parentWidth = $('.admintabcontainer').offsetParent().width(); var percent = 100*width/parentWidth; $(".admintabcontainer").css("width","13%"); $(".admintabcontainer").css("margin-left","5%"); $(".admintabs .expandadmintabs").css("margin-top", $(".admintabs .expandadmintabs").parent().outerHeight()*-1); $(this).find(".expandadmintabs").css("margin-left", "20%"); $(this).find(".expandadmintabs").css("margin-top", $(this).position().top*-1+40); var index= $(this).index(); var val= $(this); if(percent > 20) setTimeout(function(){ $(".adminactivecontent").css("margin-top", val.position().top*-1+40); }, 1000); }); var highest; var first = 1; $('.admintabs').each(function() { if(first == 1) { highest = $(this); first = 0; } else { if(highest.height() < $(this).height()) { highest = $(this); } } }); $(".admintabs").css("min-height", highest.height()); }); function adminaddcls(ele, indexval) { var selectduplicate=document.getElementsByClassName("admintabs"); for(var i=0; i<selectduplicate.length; i++) { selectduplicate[i].getElementsByClassName("expandadmintabs")[0].className="expandadmintabs"; } selectduplicate[indexval].getElementsByClassName("expandadmintabs")[0].className="expandadmintabs adminactivecontent"; } </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » Tabs animation. 喜欢 (1)or分享 (0)
