jquery视差图片切换

时间：2017-07-20 17:24:08 阅读：200 评论：0 收藏：0 [点我收藏+]

<!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>

原文地址：http://www.cnblogs.com/fengyuzhen/p/7211943.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行