1. 首頁
  2. 問答
  3. 停止滾動一次最後的li在屏幕上可見

停止滾動一次最後的li在屏幕上可見

2015-10-09 55 views
1

我有一組圖像對齊在一個單一的row和overflow:hidden。我有2個按鈕，Left和Right，點擊它滾動div到其相對側時。我在這裏遇到的問題是，即使在屏幕上最後一個element可見時，滾動在一定程度上繼續，然後停止，從而在屏幕中創建空白空間的方面。我怎樣才能防止這一點？這裏是Fullscreen result和Fiddle和下面的代碼：停止滾動一次最後的li在屏幕上可見

$(document).ready(function() { 
 
    //Video Slider begins 
 
    var totalWidth = 0; 
 

 
    $(".gallery__item").each(function() { 
 
    totalWidth = totalWidth + $(this).outerWidth(true) + 100; 
 
    }); 
 

 
    var maxScrollPosition = totalWidth - 100 - $(".gallery-wrap").outerWidth(); 
 

 
    function toGalleryItem($targetItem) { 
 
    if ($targetItem.length) { 
 
     var newPosition = $targetItem.position().left; 
 
     if (newPosition <= maxScrollPosition - 100) { 
 
     $targetItem.addClass("vid-item-active"); 
 
     $targetItem.siblings().removeClass("vid-item-active"); 
 
     $(".gallery").animate({ 
 
      left: -(newPosition) 
 
     }); 
 
     } else { 
 
     $(".gallery").animate({ 
 
      left: -(maxScrollPosition) 
 
     }); 
 
     }; 
 
    }; 
 
    }; 
 
    $(".des-style").width("100%"); 
 
    $(".gallery").width(totalWidth); 
 

 
    $(".vid-item:first").addClass("vid-item-active"); 
 

 
    // When the prev button is clicked 
 
    // ==================================================================== 
 
    $(".gallery__controls-prev").on("click", function() { 
 
    var $targetItem = $(".vid-item-active").prev(); 
 
    toGalleryItem($targetItem); 
 
    }); 
 
    // When the next button is clicked 
 
    // ==================================================================== 
 
    $(".gallery__controls-next").on("click", function() { 
 
    var $targetItem = $(".vid-item-active").next(); 
 
    toGalleryItem($targetItem); 
 
    }); 
 
});
.gallery-wrap { 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
.services-wrap { 
 
    padding: 20px; 
 
    background: #fff; 
 
    border-radius: 4px; 
 
    margin: 0 0 40px; 
 
    margin-top: 15px !important; 
 
    box-shadow: 5px 5px 5px gray; 
 
    max-height: 220px !important; 
 
    min-height: 220px !important; 
 
} 
 
.gallery { 
 
    position: relative; 
 
    left: 0px; 
 
    top: 0px; 
 
} 
 
.gallery__item { 
 
    float: left; 
 
    list-style: outside none none; 
 
    margin-right: 20px; 
 
    width: 200px; 
 
} 
 
.stay-fixed { 
 
    position: absolute; 
 
    z-index: 20; 
 
} 
 
.gallery__controls-prev { 
 
    cursor: pointer; 
 
    float: left; 
 
} 
 
.gallery__controls-next { 
 
    cursor: pointer; 
 
    float: right; 
 
} 
 
.gallery__controls-prev img, 
 
.gallery__controls-next img { 
 
    width: 28px; 
 
    height: 28px; 
 
} 
 
.left { 
 
    transform: rotate(-180deg); 
 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<div class="gallery-wrap"> 
 
    <div class="gallery clearfix"> 
 
    <ul> 
 
     <li class="gallery__item vid-item vid-item-active"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="vjEehv6_3b0" data-desc="A Glimpse of Tiger dance by Team MCB"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Chrysanthemum.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="co9iVzVTQIQ" data-desc="Marpalli Chande seve in Tirupathi Sri Govindaraja Swami Temple."> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Desert.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="qtrEg7plreY" data-desc="Outside Chande Program "> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Hydrangeas.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="KW95id4p-9Q" data-desc="Bannanje Competition"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Jellyfish.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="MAqH4vq4fGM" data-desc="Hulivesha by our Team"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Koala.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="WHBMONzvdHY" data-desc="Rashi Pooje at Marpalli Temple"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Lighthouse.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="Jp_lu1KaAf0" data-desc="Uppoor Chande"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Penguins.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="4wnAaX7LNKc" data-desc="Marpalli Akhanda Chande Seve - part[2]"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled.png"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="rZorz5vYk10" data-desc="Akhanda Chande Seve at Marpalli Mahalingeshwara Chande Balaga - part[1]"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled1.png"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="bE6i8HsJbt4" data-desc="Chande seve at Udupi Sri Krishna Temple"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled2.png"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="gallery__controls row clearfix stay-fixed col-md-6 col-md-offset-3 col-xs-12"> 
 
    <div class="gallery__controls-prev"> 
 
     <img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" class="left"> 
 
    </div> 
 
    <div class="gallery__controls-next"> 
 
     <img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-10-09 Guruprasad Rao

+1

不能禁用'next'按鈕時，最後的影像是鑑於 – Satpal

+1

@Satpal是的，這就是OP是問，怎麼知道什麼時候最後一次圖像在視圖 – Tushar

+1

檢查[演示]（https://jsfiddle.net/tusharj/fc4ma1o2/1/）或[更好的一個]（https://jsfiddle.net/tusharj/y3844x5t/） – Tushar

回答

2

請檢查我已經加入片段。

Demo Link

$(document).ready(function() { 
 
    //Video Slider begins 
 
    var totalWidth = 0; 
 
    var mainDivWidth = $(".gallery").outerWidth(); 
 
    $(".gallery__item").each(function() { 
 
    debugger; 
 
    totalWidth = totalWidth + $(this).outerWidth(true) + 12; 
 
    }); 
 

 
    var maxScrollPosition = totalWidth - 100 - $(".gallery-wrap").outerWidth(); 
 

 
    function toGalleryItem($targetItem) { 
 
    if ($targetItem.length) { 
 

 
     var newPosition = $targetItem.position().left; 
 
     debugger; 
 
     if (totalWidth < newPosition + mainDivWidth) { 
 
     return false; 
 
     } 
 
     if (newPosition <= maxScrollPosition - 100) { 
 
     $targetItem.addClass("vid-item-active"); 
 
     $targetItem.siblings().removeClass("vid-item-active"); 
 
     $(".gallery").animate({ 
 
      left: -(newPosition) 
 
     }); 
 
     } else { 
 
     $(".gallery").animate({ 
 
      left: -(maxScrollPosition) 
 
     }); 
 
     }; 
 
    }; 
 
    }; 
 
    $(".des-style").width("100%"); 
 
    $(".gallery").width(totalWidth); 
 
    //$(".gallery").css("left", "-40px"); 
 
    // Basic HTML manipulation 
 
    // ==================================================================== 
 
    // Set the gallery width to the totalWidth. This allows all items to 
 
    // be on one line. 
 

 
    $(".vid-item:first").addClass("vid-item-active"); 
 

 
    // When the prev button is clicked 
 
    // ==================================================================== 
 
    $(".gallery__controls-prev").on("click", function() { 
 
    var $targetItem = $(".vid-item-active").prev(); 
 
    toGalleryItem($targetItem); 
 
    }); 
 
    // When the next button is clicked 
 
    // ==================================================================== 
 
    $(".gallery__controls-next").on("click", function() { 
 
    var $targetItem = $(".vid-item-active").next(); 
 
    toGalleryItem($targetItem); 
 
    }); 
 
});
.gallery-wrap { 
 
    margin: 0 auto; 
 
    overflow: hidden; 
 
} 
 
.services-wrap { 
 
    padding: 20px; 
 
    background: #fff; 
 
    border-radius: 4px; 
 
    margin: 0 0 40px; 
 
    margin-top: 15px !important; 
 
    box-shadow: 5px 5px 5px gray; 
 
    max-height: 220px !important; 
 
    min-height: 220px !important; 
 
} 
 
.gallery { 
 
    position: relative; 
 
    left: 0px; 
 
    top: 0px; 
 
} 
 
.gallery__item { 
 
    float: left; 
 
    list-style: outside none none; 
 
    margin-right: 20px; 
 
    width: 200px; 
 
} 
 
.stay-fixed { 
 
    position: absolute; 
 
    z-index: 20; 
 
} 
 
.gallery__controls-prev { 
 
    cursor: pointer; 
 
    float: left; 
 
} 
 
.gallery__controls-next { 
 
    cursor: pointer; 
 
    float: right; 
 
} 
 
.gallery__controls-prev img, 
 
.gallery__controls-next img { 
 
    width: 28px; 
 
    height: 28px; 
 
} 
 
.left { 
 
    transform: rotate(-180deg); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gallery-wrap"> 
 
    <div class="gallery clearfix"> 
 
    <ul> 
 
     <li class="gallery__item vid-item vid-item-active"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="vjEehv6_3b0" data-desc="A Glimpse of Tiger dance by Team MCB"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Chrysanthemum.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="co9iVzVTQIQ" data-desc="Marpalli Chande seve in Tirupathi Sri Govindaraja Swami Temple."> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Desert.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="qtrEg7plreY" data-desc="Outside Chande Program "> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Hydrangeas.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="KW95id4p-9Q" data-desc="Bannanje Competition"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Jellyfish.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="MAqH4vq4fGM" data-desc="Hulivesha by our Team"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Koala.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="WHBMONzvdHY" data-desc="Rashi Pooje at Marpalli Temple"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Lighthouse.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="Jp_lu1KaAf0" data-desc="Uppoor Chande"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Penguins.jpg"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="4wnAaX7LNKc" data-desc="Marpalli Akhanda Chande Seve - part[2]"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled.png"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="rZorz5vYk10" data-desc="Akhanda Chande Seve at Marpalli Mahalingeshwara Chande Balaga - part[1]"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled1.png"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
     <li class="gallery__item vid-item"> 
 
     <div class="media services-wrap wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;"> 
 
      <a class="load-video" href="#" data-toggle="modal" data-target="#loadVidPlayer" data-url="bE6i8HsJbt4" data-desc="Chande seve at Udupi Sri Krishna Temple"> 
 
      <div class="pull-left"> 
 
       <img class="img-responsive thumbnail vid-thumb" alt="Image Description" src="images/Untitled2.png"> 
 
      </div> 
 
      <div class="clearfix"></div> 
 
      <div class="des-style" style="width: 100%;"> 
 
       <div class="body-content"> 
 
       Description 
 
       </div> 
 
      </div> 
 
      </a> 
 
     </div> 
 
     </li> 
 
    </ul> 
 

 
    </div> 
 
    <div class="gallery__controls row clearfix stay-fixed col-md-6 col-md-offset-3 col-xs-12"> 
 
    <div class="gallery__controls-prev"> 
 
     <img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png" class="left"> 
 
    </div> 
 
    <div class="gallery__controls-next"> 
 
     <img src="http://www.myiconfinder.com/uploads/iconsets/7e81c2f3697b91ee17fe6ed6348c232a-Arrow.png"> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-10-09 08:58:37 Mitul

+0

感謝您的答案@Mitul ..它的工作..但它會很好，如果你添加一些解釋的答案.. :) –

+0

我添加了條件 'if（totalWidth Mitul

+0

是的，我得到了它的好友..但我說你的答案.. :) –

相關問題

 相關問題