| <!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> |
时间： 2024-10-10 23:37:57