首页 > > 网页制作 > css >

图片翻转效果

2019-11-25 16:10:02来源：博客园阅读 ()

图片翻转效果

自引jquery

css

<style>
	*{margin:0px;padding:0px;}
	li{list-style:none;}
	#brand{
		width:330px;
		height:400px;
		border:1px solid #dddddd;
		box-shadow:0px 0px 5px #dddddd;
		margin:30px auto;
	}
	#brand .title{
		width:100%;
		height:35px;
		line-height:35px;
		font-size:16px;
		margin-top:4px;
		border-bottom:2px solid #33261c;
		text-align:center;
		color:#33261c;
	}
	#brand .bd-box{
		width:284px;
		height:358px;
		overflow:hidden;
		padding:0px 24px;
	}
	#brand .bd-box li{
		float:left;
		width:122px;
		height:77px;
		overflow:hidden;
		position:relative;
		margin:10px 10px 0px 10px;
	}
	#brand .bd-box li img{
		width:120px;
		height:75px;
		border:1px solid #e9e8e8;
		position:absolute;
		left:0px;
		top:0px;
		z-index:2;
		overflow:hidden;
	}
	#brand .bd-box li span{
		width:120px;
		height:0px;
		border:1px solid #e9e8e8;
		position:absolute;
		left:0px;
		top:38px;
		z-index:1;
		text-align:center;
		line-height:75px;
		font-size:14px;
		color:#FFF;
		background:#ffa340;
		font-weight:bold;
		overflow:hidden;
		display:none;
	}
	#brand .bd-box li a{
		width:120px;
		height:75px;
		position:absolute;
		left:0px;
		top:0px;
		z-index:3;
	}
</style>

　　html、js

<body>
	<div id="brand">
		<div class='title'>
			热门品牌推荐
		</div>
		<ul class='bd-box'>
			<li>
				<a href="此处链接在外面"> </a>
				<img src="images/1.jpg" />
				<span>背面</span>
			</li>
			<li>
				<a href="此处链接在外面"> </a>
				<img src="images/2.jpg" />
				<span>背面</span>
			</li>
			<li>
				<a href="此处链接在外面"> </a>
				<img src="images/3.jpg" />
				<span>背面</span>
			</li>
			<li>
				<a href="此处链接在外面"> </a>
				<img src="images/4.jpg" />
				<span>背面</span>
			</li>
			<li>
				<a href="此处链接在外面"> </a>
				<img src="images/5.jpg" />
				<span>背面</span>
			</li>
			<li>
				<a href="此处链接在外面"> </a>
				<img src="images/6.jpg" />
				<span>背面</span>
			</li>
			<li>
				<a href="此处链接在外面"> </a>
				<img src="images/7.jpg" />
				<span>背面</span>
			</li>
			<li>
				<a href="此处链接在外面"> </a>
				<img src="images/8.jpg" />
				<span>背面</span>
			</li>
		</ul>
	</div>
	
</body>
</html>
<script type="text/javascript">
	/*
	 1、鼠标移入  --   改变li中 img 的 height = 0   top ： h/2 ， 改变span 的  height ：ｈ　　　ｔｏｐ　：　０
	 2、鼠标移出 --   改变 span   再改变  img
	* */
	var h = $("ul li:first").height();//获取第一li的一个高度
	$("ul li").hover(function(){
		$(this).find('img').animate({
			height : 0,
			top : h / 2
		},500,function(){
			$(this).hide();
			$(this).next().show().animate({height:h,top:0},500);
		})
	},function(){
		$(this).find("span").animate({
			height : 0,
			top : h / 2
		},500,function(){
			$(this).prev().hide();
			$(this).prev().show().animate({height:h,top:0},500)
		})
	})
	
	
</script>