標籤:blank val res 圖片切換 no-repeat bsp set 文字 attr
<!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視差圖片切換