当前位置： 移动技术网 > IT编程>网页制作>CSS > 图片翻转效果

图片翻转效果

2019年11月25日  | 移动技术网IT编程  | 我要评论

自引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>

　

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网