jquery视差图片切换

Posted 2020-09-29

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery视差图片切换相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title>视差图片文字切换</title>
	<script src="js/jquery-2.1.0.js"></script>
	<style>
	.box {
	width:750px;
	height: 750px;
	border: 1px solid red;
	overflow: hidden;
	margin-left: 300px;
	position: absolute;
	background:url("img/DSC05940.JPG")no-repeat center;
	}

	img {
	width: 1000px;
	height: 750px;
	position: absolute;
	}
	.fontbox{
	width:3750px;
	height: 750px;
	position: absolute;
	left: 0;
	}
	.font{
	float: left;
	width: 750px;
	height: 750px;
	line-height: 750px;
	text-align: center;
	font-size: 80px;

	}
	</style>
	</head>

	<body>
	<div class="box">
	<img src="img/DSC05940.JPG" />
	<div class="fontbox">
	<div class="font">1</div>
	<div class="font">2</div>
	<div class="font">3</div>
	<div class="font">4</div>
	</div>

	</div>
	</body>
	<script>
	$("img").animate({
	left: "-50px"

	}, 1000).animate({
	left: "-100px"
	}, 1000).animate({
	left: "-150px"
	}, 1000).animate({
	left: "-200px"
	},1000)
	$(".fontbox").animate({
	left:"-750px"
	},2000).animate({
	left:"-1500px"
	}).animate({
	left:"-2250"
	})
	</script>

	</html>

以上是关于jquery视差图片切换的主要内容，如果未能解决你的问题，请参考以下文章