【教程】h5制作动画焦点图

先上效果图

【教程】h5制作动画焦点图

html代码，引用了jquery和自定义的js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>动画焦点图</title>
		<link rel="stylesheet" href="css/style.css" />
		<script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script>
		<script type="text/javascript" src="js/myfunction.js" ></script>
	</head>
	<body>
		<div id="igs">
			<div id="ig1">
				<div class="txt">
					<p class="p1">作者：猫仔</p>
					<p class="p2">风景这里独好1</p>
				</div>
			</div>
			<div id="ig2">
				<div class="txt">
					<p class="p1">作者：猫仔</p>
					<p class="p2">风景这里独好2</p>
				</div>
			</div>
			<div id="ig3">
				<div class="txt">
					<p class="p1">作者：猫仔</p>
					<p class="p2">风景这里独好3</p>
				</div>
			</div>
			<div id="ig4">
				<div class="txt">
					<p class="p1">作者：猫仔</p>
					<p class="p2">风景这里独好4</p>
				</div>
			</div>
			<div id="ig5">
				<div class="txt">
					<p class="p1">作者：猫仔</p>
					<p class="p2">风景这里独好5</p>
				</div>
			</div>
		</div>
	</body>
</html>

myfunction.js代码

$(function () {
	$(".txt").mouseover(function () {
		$(this).parent().stop(true).animate({"width":"800px"},1500).siblings().stop(true).animate({"width":"80px"},1500);	
	});
});

css代码

*{
	padding: 0;
	margin: 0;
	font-family: "微软雅黑";	
}
#igs {
	width:1120px;
	height: 500;
	cursor: pointer;
	overflow: hidden;
}
#ig1 {
	width: 80px;
	height: 500px;
	background: url(../img/1.jpg);
	float: left;
}
#ig2 {
	width: 80px;
	height: 500px;
	background: url(../img/2.jpg);
	float: left;
}
#ig3 {
	width: 80px;
	height: 500px;
	background: url(../img/3.jpg);
	float: left;
}
#ig4 {
	width: 80px;
	height: 500px;
	background: url(../img/4.jpg);
	float: left;
}
#ig5 {
	width: 800px;
	height: 500px;
	background: url(../img/5.jpg);
	float: left;
}
.txt {
	width: 80px;
	height: 500px;
	background: rgba(0,0,0,0.5);
	margin: ;
}
.p1 {
	font-size: 12px;
	width: 12px;
	color: #fff;
	float: left;
	margin: 12px;
}
.p2 {
	font-size: 14px;
	width: 14px;
	color: #fff;
	float: left;
	margin: 12px;	
}

【教程】h5制作动画焦点图

相关推荐