<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js" type="text/javascript"></script> <script src="滑动动画.js" type="text/javascript"></script> <link rel="stylesheet" href="滑动动画.css" type="text/css"/> </head> <body> <div class="header"> <ul> <li class="nav"><a href="#">one</a></li> <li class="nav"><a href="#">two</a></li> <li class="nav"><a href="#">three</a></li> <li class="nav"><a href="#">four</a></li> </ul> </div> <div class="big"> <div class="main"> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> </div> </div> </body> </html>
*{ margin:0; padding:0; } .header{ background-color:aqua; height: 40px; } ul{ list-style: none; } ul li{ float: left; text-align: center; line-height: 40px; border-right: 1px solid white; } a{ text-decoration:none; color: white; display: block; padding: 0 20px; } ul li a:hover { background-color: white; color: aqua; } .big{ width:100%; overflow: hidden; height:0; top:40px; } .main{ width: 400%; height:500px; } .a{ width:25%; height: 500px; background-color: yellow; float:left; } .b{ width:25%; height: 500px; background-color: red ; float:left; } .c{ width:25%; height: 500px; background-color: black ; float:left; } .d{ width:25%; height: 500px; background-color: blue; float:left; }
$(function () { $(".header").on("click","li",function () { var curIndex = $(this).index(), mlValue = "-" + curIndex * 100 + "%"; /*index()获取header里的li，并确定为第几个然后返回数字*/ if ($(".big").hasClass("active")) { $(".main").animate({marginLeft: mlValue}); } else{ $(".main").css({marginLeft:mlValue}); $(".big").animate({height:"500px"}).addClass("active"); } }); });