首页 > 代码库 > jquery视差图片切换

jquery视差图片切换

2024-10-31 22:09:39   207人阅读

<!DOCTYPE html>
  <html>
   
  <head>
  <meta charset="UTF-8">
  <title>视差图片文字切换</title>
  <script src="http://www.mamicode.com/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="http://www.mamicode.com/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视差图片切换


联系
我们