JQ滑动动画展示

html、js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/index1.css" />
	</head>
	<body>
		<div class="big">
		<div class="container">
			  <div class="list">
			  	  <div class="item">首页</div>
			  	  <div class="tip"><span>内容</span><span>内容</span><span>内容</span></div>
			  	  <div class="item">特色</div>
			  	  <div class="tip"><span>内容</span><span>内容</span><span>内容</span></div>
			  	  <div class="item">游玩</div>
			  	  <div class="tip"><span>内容</span><span>内容</span><span>内容</span></div>
			  	  <div class="item">了解</div>
			  	  <div class="tip"><span>内容</span><span>内容</span><span>内容</span></div>
			  	  <div class="item">活动</div>
			  	  <div class="tip"><span>内容</span><span>内容</span><span>内容</span></div>
			  </div>
			  <div class="label">
			  	 <div class="icon">Animation</div>
			  </div>
		</div>
		
		 <!--轮播图-->
			      <div class="scroll">
			      	 <ul>
			      	 	<li>
			      	 		<img src="img/glyphicons-halflings-white.png" alt="" />
			      	 	</li>
			      	 	<li>
			      	 		<img src="img/glyphicons-halflings.png" alt="" />
			      	 	</li>
			      	 	<li>
			      	 		<img src="img/glyphicons-halflings-white.png" alt="" />
			      	 	</li>
			      	 	<li>
			      	 		<img src="img/glyphicons-halflings.png" alt="" />
			      	 	</li>
			      	 	<li>
			      	 		<img src="img/glyphicons-halflings-white.png" alt="" />
			      	 	</li>
			      	 </ul>
			      </div>
               <!--轮播图结束-->
		
		</div>
		<script src="js/jquery-3.3.1.min.js"></script>
		<script>
			 	 $(".item").mouseenter(function(){
			  	  	 //console.log($(this).index())
			  	  	 switch($(this).index()){
			  	  	 	case 0:
			  	  	 	 $(".item").eq(0).addClass('blue')
			  	  	 	 $(".item").eq(1).removeClass('blue')
			  	  	 	 $(".item").eq(2).removeClass('blue')
			  	  	 	 $(".item").eq(3).removeClass('blue')
			  	  	 	 $(".item").eq(4).removeClass('blue')
			  	  	 	 $('.tip').eq(0).animate({width:"200px"},100)
			  	  	 	 $('.tip').eq(1).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(2).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(3).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(4).animate({width:"0px"},100)
			  	  	 	 break;
			  	  	 	 case 2:
			  	  	 	 $(".item").eq(0).removeClass('blue')
			  	  	 	 $(".item").eq(1).addClass('blue')
			  	  	 	 $(".item").eq(2).removeClass('blue')
			  	  	 	 $(".item").eq(3).removeClass('blue')
			  	  	 	 $(".item").eq(4).removeClass('blue')
			  	  	 	 $('.tip').eq(0).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(1).animate({width:"200px"},100)
			  	  	 	 $('.tip').eq(2).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(3).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(4).animate({width:"0px"},100)
			  	  	 	 break;
			  	  	 	 case 4:
			  	  	 	 $(".item").eq(0).removeClass('blue')
			  	  	 	 $(".item").eq(1).removeClass('blue')
			  	  	 	 $(".item").eq(2).addClass('blue')
			  	  	 	 $(".item").eq(3).removeClass('blue')
			  	  	 	 $(".item").eq(4).removeClass('blue')
			  	  	 	 $('.tip').eq(0).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(1).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(2).animate({width:"200px"},100)
			  	  	 	 $('.tip').eq(3).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(4).animate({width:"0px"},100)
			  	  	 	 break;
			  	  	 	 case 6:
			  	  	 	 $(".item").eq(0).removeClass('blue')
			  	  	 	 $(".item").eq(1).removeClass('blue')
			  	  	 	 $(".item").eq(2).removeClass('blue')
			  	  	 	 $(".item").eq(3).addClass('blue')
			  	  	 	 $(".item").eq(4).removeClass('blue')
			  	  	 	 $('.tip').eq(0).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(1).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(2).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(3).animate({width:"200px"},100)
			  	  	 	 $('.tip').eq(4).animate({width:"0px"},100)
			  	  	 	 break;
			  	  	 	 case 8:
			  	  	 	 $(".item").eq(0).removeClass('blue')
			  	  	 	 $(".item").eq(1).removeClass('blue')
			  	  	 	 $(".item").eq(2).removeClass('blue')
			  	  	 	 $(".item").eq(3).removeClass('blue')
			  	  	 	 $(".item").eq(4).addClass('blue')
			  	  	 	 $('.tip').eq(0).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(1).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(2).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(3).animate({width:"0px"},100)
			  	  	 	 $('.tip').eq(4).animate({width:"200px"},100)
			  	  	 	 break;
			  	  	 }
			  	})
		</script>
	</body>
</html>

css

*{margin: 0;padding: 0;list-style: none;}
html,body,.big{width: 100%;height: 100%;}
.big .container{width: 100%;height: 82px;background: deepskyblue;}
.list{display:flex;float:left;}
.item{
           width: 100px;
           height: 80px;
           line-height: 80px;
           border:1px solid #fff;
           text-align: center;
           border-radius: 20px;
           margin-left: 10px;
           color: #fff;}
.list .tip{width: 0px;overflow: hidden;height: 80px;display: flex;justify-content: space-between;flex-wrap: wrap;}
.list .tip span{flex: 1;text-align: center;color: #fff;}

.blue{background: #fff;color:deepskyblue;border: 1px solid deepskyblue;}

.label{float:right;}
.label .icon{font-size: 60px;
animation: zhuan 5s infinite ease;
display: inline-block;color: #fff;}
@keyframes zhuan{
	0%{transform: rotateY(0deg);}
	50%{transform: rotateY(90deg);}
	100%{transform: rotateY(0deg);}
}

猜你喜欢