首页 > 其他 > 详细

图片翻转效果

时间:2019-11-25 12:31:18      阅读:77      评论:0      收藏:0      [点我收藏+]

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

 

图片翻转效果

原文:https://www.cnblogs.com/xiaoyaolang/p/11926765.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!