jquery如何實現(xiàn)圖片無縫滾動蒙版遮蔽效果

小編給大家分享一下jquery如何實現(xiàn)圖片無縫滾動蒙版遮蔽效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設計制作、成都網(wǎng)站建設與策劃設計,分宜網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設10多年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:分宜等地區(qū)。分宜做網(wǎng)站價格咨詢:18982081108

本文實例為大家分享了jquery實現(xiàn)圖片無縫滾動、蒙版效果的具體代碼，供大家參考，具體內容如下

1、無縫連接：通過對li設置屬性float：left；消除標簽之間的間隔
2、通過對ul整體進行偏移設置，使圖片整體滾動，
3、設置圖片切換時機，
4、蒙版遮罩移入時機的選擇

代碼片.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>
 <style>
  *{
  margin: 0;
  padding: 0;
  }
  .div1{
  width: 400px;
  height: 150px;  
  overflow: hidden;
  border: 1px solid #A9A9A9;
  margin: 30px auto;
  }
  .ul1{
  position: relative;
  left: 0px;
  width: 1200px;
  }
  .ul1>li{
  position: relative;  
  list-style: none;
  float: left;  
  width: 200px;
  height: 150px;
  background: #3388FF;
  }
  .ul1>li>div{
  position: absolute;
  left: 0;
  top: 0;
  background: #A9A9A9;
  width: 200px;
  height: 150px;
  opacity: 0;
  }
 </style>
 </head>
 <body>
 <div class="div1">
  <ul class="ul1">
  <li><img src="../img/wall1.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall2.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall3.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall4.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall1.jpg" alt="" width="100%"/><div></div></li>
  <li><img src="../img/wall2.jpg" alt="" width="100%"/><div></div></li>
  </ul>
 </div>
 <script>
  $(function(){
  var $time = '';
  var mi = 0;
  gundong();
  function gundong(){
   $time = setInterval(function(){
   mi += -10;
   if (mi<-800) {
    mi = 0
   }
   $('.ul1').css({    
    marginLeft: mi+'px'   
   });
   },100);
  }
  $('li').mouseover(function(){
   window.clearTimeout($time);
   $('li').not($(this)).contents('div').css({
   opacity:0.6
   });
  });
  $('li').mouseout(function(){
   gundong();
   $('li').not($(this)).contents('div').css({
   opacity:0
   });
  });
  });
 </script>
 </body>
</html>

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發(fā)網(wǎng)站。

以上是“jquery如何實現(xiàn)圖片無縫滾動蒙版遮蔽效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站名稱：jquery如何實現(xiàn)圖片無縫滾動蒙版遮蔽效果
轉載注明：http://chinadenli.net/article44/podphe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、自適應網(wǎng)站、服務器托管、小程序開發(fā)、面包屑導航、品牌網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

jquery如何實現(xiàn)圖片無縫滾動蒙版遮蔽效果

jquery是什么