当前位置：网站首页>拉萨手风琴

拉萨手风琴

2022-06-28 05:21:00 【辕小白】 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>拉萨手风琴</title>
  <style>
	*{
		margin: 0;
	}
	body{
		background-image: url(../images/6.jpg);
		background-repeat: no-repeat;
		background-size: cover;
	}
	.piclists{
		width: 1089px;
		height: 429px;
		background-color: #8392e2;
		margin: 100px auto;
	}
	.piclists ul{
		list-style: none;
		padding: 0;
		height: 100%;
	}
	.list{
		float: left;
		width: 100px;
		height: 429px;
		background-color: #ff9999;
		background-image: url(../images/3.jpg);
	}
	.list:nth-child(2){
		background-image: url(../images/4.jpg);
	}
	.list:nth-of-type(3){
		background-image: url(../images/5.jpg);
	}
	.list:nth-of-type(4){
		width: 789px;
		background-image: url(../images/6.jpg);
	}
	.list div{
		width: 100px;
		height: 429px;
		background-color: rgba(0,0,0,0.5);
	}
	.list div p{
		padding: 43px;
		color: #ffffff;
	}
  </style>
 </head>
 <body>
	<div class="piclists">
		<ul>
			<li class="list">
				<div>
					<p>我的个人拉萨之旅 | | 故事之城</p>
				</div>
			</li>
			<li class="list">
				<div>
					<p>我的个人拉萨之旅 | | 故事之城</p>
				</div>
			</li>
			<li class="list">
				<div>
					<p>我的个人拉萨之旅 | | 故事之城</p>
				</div>
			</li>
			<li class="list">
				<div>
					<p>我的个人拉萨之旅 | | 故事之城</p>
				</div> 
			</li>
		</ul>
	</div>
	<script src="../js/jquery-1.11.1.min.js"></script>
	<!--script src="../js/tab.js"></script-->
	<script>
		(function($){
			$.fn.tab = function(option){
				var bgNode = option.bg;
				var eventNode = option.el;
				var imgArr = option.bgImg;
			   $(eventNode).click(function(){
					var index = $(this).index();
					$(this).stop().animate({
						width: "789px"
					},500).siblings().stop().animate({	
						width: "100px"
					},500);
					$(bgNode).css({
						backgroundImage:"url("+imgArr[index]+")"
					});
				})	
			}
		})($)
		$.fn.tab({
			el:".list",
			bg:"body",
			bgImg: ["../images/3.jpg","../images/4.jpg",
			"../images/5.jpg","../images/6.jpg"]
		});
	</script>
 </body>
</html>

在这里插入图片描述

原网站

版权声明
本文为[辕小白]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_43711676/article/details/111875067

边栏推荐

猜你喜欢

随机推荐