標籤:jquer javascrip round char hidden black back sheet lock
<!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"); } });});
jQuery實現動畫滑動二級菜單