jQuery隨機及響應式畫廊插件least.js

拉丁傳說 2018-4-13 1444

least.js?是一個基于 jQuery 的畫廊插件,當刷新頁面的時候,縮略圖會隨機排列。同時它還是響應式設計,能夠自動適應窗口大小。

兼容性

least.js 使用了 HTML5 和 CSS3,所以不兼容 IE6、IE7,其他瀏覽器正常。

使用方法

引入文件

<link rel="stylesheet" href="css/least.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/least.min.js"></script>
<script src="js/jquery.lazyload.js"></script>

HTML

<section>
?? ?<ul id="gallery">
?? ??? ?<li id="fullPreview"></li>
?? ??? ?<li>
?? ??? ??? ?<a href="img/full/1.jpg"></a>
?? ??? ??? ?<img data-original="img/thumb/1.jpg" src="img/thumb/1.jpg" alt="Fish">
?? ??? ??? ?<div class="overLayer"></div>
?? ??? ??? ?<div class="infoLayer">
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li><h2>Fish</h2></li>
?? ??? ??? ??? ??? ?<li><p>View Picture</p></li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ??? ?<p class="projectInfo"> <strong>Monday, 14th April 2093:</strong> sit amet, 
?? ??? ??? ??? ?consetetur sadipscing elitr, sed diam nonumy eirmod 
?? ??? ??? ??? ?tempor invidunt ut labore et dolore magna aliquyam erat,
?? ??? ??? ??? ?sed diam voluptua. At vero eos et accusam et justo duo 
?? ??? ??? ??? ?dolores et ea rebum. </p>
?? ??? ?</li>
?? ??? ?<li>
?? ??? ??? ?<a href="img/full/2.jpg"></a>
?? ??? ??? ?<img data-original="img/thumb/2.jpg" src="img/thumb/2.jpg" alt="Golden Gate">
?? ??? ??? ?<div class="overLayer"></div>
?? ??? ??? ?<div class="infoLayer">
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li><h2>New York</h2></li>
?? ??? ??? ??? ??? ?<li><p>View Picture</p></li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ??? ?<p class="projectInfo"> <strong>Monday, 14th April 2093:</strong> sit amet, 
?? ??? ??? ??? ?consetetur sadipscing elitr, sed diam nonumy eirmod 
?? ??? ??? ??? ?tempor invidunt ut labore et dolore magna aliquyam 
?? ??? ??? ??? ?erat, sed diam voluptua. At vero eos et accusam et 
?? ??? ??? ??? ?justo duo dolores et ea rebum. </p>
?? ??? ?</li>
?? ?</ul>
</section>

JavaScript

$(function() {
?? ?$('#gallery').least();
});

參數

參數 類型 說明 默認值
random 布爾值 隨機排列縮略圖 true
lazyload 布爾值 延遲加載圖片 true
scrollToGallery 布爾值 點擊縮略圖時滾動到查看大圖頂部(當頁面高度小于窗口高度時,滾動似乎有 bug) true

演 示 下 載

最新回復 (0)
返回
發新帖
下载麻将游戏四人麻将 一级快播黄色片 5分快3和值计算方法 5分赛车下载-全能版 幸运28预测神测网 姚记棋牌官方苹果版 黑龙江快乐十分开奖图 中原风彩22选五今晚 浙江20选5开奖号码是多少 快乐扑克中奖率 大庆麻将52 新疆25选7号码统计 新浪网球比分直播 彩票控新疆11选5走势图 52大庆麻将漏牌神器 辽宁35选7开奖结果走势图 永利棋牌网?