網(wǎng)站制作之靜態(tài)頁(yè)面模擬點(diǎn)擊加載更多

近期在網(wǎng)站開(kāi)發(fā)過(guò)程中遇到了一個(gè)需要在靜態(tài)頁(yè)面模擬點(diǎn)擊加載更多的頁(yè)面，為了更好的用戶體驗(yàn)效果，我們將實(shí)現(xiàn)一種無(wú)刷新加載的效果，現(xiàn)在來(lái)舉個(gè)例子，頁(yè)面布局如下：

頁(yè)面整體簡(jiǎn)潔大方，要實(shí)現(xiàn)的功能是：頁(yè)面打開(kāi)默認(rèn)顯示六條信息，當(dāng)用戶點(diǎn)擊下面的“see more+”時(shí)，在下面加載三條，當(dāng)信息全部加載完之后，再點(diǎn)擊“see more +”的時(shí)候“see more +”顯示為“Already shown”,別看這一點(diǎn)變化，需要使用到的JS代碼還是比較復(fù)雜的，例如如何顯示正在加載中，如何讓內(nèi)容更好的嵌接在一起顯示等問(wèn)題，都需要通過(guò)JS的代碼來(lái)實(shí)現(xiàn)。
為此在頁(yè)面布局上html代碼如下:
<div class="list">
<div class="hidden"></div>
<ul>
<li class="wow slideInUp animate" data-wow-delay=".1s">
<a href="caseinfo/caseinfo.html">
<div class="img">
<img src="images/cimg21.jpg">
<div class="more"><span>查看更多+</span></div>
</div>
<div class="tbox">
<div class="t1">重慶陸軍軍醫(yī)大學(xué)</div>
<div class="t2">生物信息學(xué)及醫(yī)學(xué)超級(jí)計(jì)算系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)</div>
</div>
</a>
</li>
<li class="wow slideInUp animate" data-wow-delay=".2s">
<a href="caseinfo/caseinfo.html">
<div class="img">
<img src="images/cimg22.jpg">
<div class="more"><span>查看更多+</span></div>
</div>
<div class="tbox">
<div class="t1">漯河糧庫(kù)項(xiàng)目</div>
<div class="t2">糧食儲(chǔ)備自動(dòng)化及監(jiān)控系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)</div>
</div>
</a>
</li>
<li class="wow slideInUp animate" data-wow-delay=".3s">
<a href="caseinfo/caseinfo.html">
<div class="img">
<img src="images/cimg23.jpg">
<div class="more"><span>查看更多+</span></div>
</div>
<div class="tbox">
<div class="t1">精銳視覺(jué)智能科技有限公司</div>
<div class="t2">OA系統(tǒng)及CRM系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)</div>
</div>
</a>
</li>
<li class="wow slideInUp animate" data-wow-delay=".4s">
<a href="caseinfo/caseinfo.html">
<div class="img">
<img src="images/cimg24.jpg">
<div class="more"><span>查看更多+</span></div>
</div>
<div class="tbox">
<div class="t1">采用MRTU的實(shí)時(shí)油井監(jiān)測(cè)系統(tǒng)</div>
<div class="t2">生物信息學(xué)及醫(yī)學(xué)超級(jí)計(jì)算系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)</div>
</div>
</a>
</li>
<li class="wow slideInUp animate" data-wow-delay=".5s">
<a href="caseinfo/caseinfo.html">
<div class="img">
<img src="images/cimg25.jpg">
<div class="more"><span>查看更多+</span></div>
</div>
<div class="tbox">
<div class="t1">智能水網(wǎng)和泵站監(jiān)測(cè)</div>
<div class="t2">糧食儲(chǔ)備自動(dòng)化及監(jiān)控系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)</div>
</div>
</a>
</li>
<li class="wow slideInUp animate" data-wow-delay=".6s">
<a href="caseinfo/caseinfo.html">
<div class="img">
<img src="images/cimg26.jpg">
<div class="more"><span>查看更多+</span></div>
</div>
<div class="tbox">
<div class="t1">建設(shè)銀行災(zāi)備中心機(jī)房KVM的使用</div>
<div class="t2">OA系統(tǒng)及CRM系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)</div>
</div>
</a>
</li>
<li class="wow slideInUp animate" data-wow-delay=".5s">
<a href="caseinfo/caseinfo.html">
<div class="img">
<img src="images/cimg25.jpg">
<div class="more"><span>查看更多+</span></div>
</div>
<div class="tbox">
<div class="t1">智能水網(wǎng)和泵站監(jiān)測(cè)</div>
<div class="t2">糧食儲(chǔ)備自動(dòng)化及監(jiān)控系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)</div>
</div>
</a>
</li>
<li class="wow slideInUp animate" data-wow-delay=".5s">
<a href="caseinfo/caseinfo.html">
<div class="img">
<img src="images/cimg25.jpg">
<div class="more"><span>查看更多+</span></div>
</div>
<div class="tbox">
<div class="t1">智能水網(wǎng)和泵站監(jiān)測(cè)</div>
<div class="t2">糧食儲(chǔ)備自動(dòng)化及監(jiān)控系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)</div>
</div>
</a>
</li>
<li class="wow slideInUp animate" data-wow-delay=".5s">
<a href="caseinfo/caseinfo.html">
<div class="img">
<img src="images/cimg25.jpg">
<div class="more"><span>查看更多+</span></div>
</div>
<div class="tbox">
<div class="t1">智能水網(wǎng)和泵站監(jiān)測(cè)</div>
<div class="t2">糧食儲(chǔ)備自動(dòng)化及監(jiān)控系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)</div>
</div>
</a>
</li>
<li class="wow slideInUp animate" data-wow-delay=".5s">
<a href="caseinfo/caseinfo.html">
<div class="img">
<img src="images/cimg25.jpg">
<div class="more"><span>查看更多+</span></div>
</div>
<div class="tbox">
<div class="t1">智能水網(wǎng)和泵站監(jiān)測(cè)</div>
<div class="t2">糧食儲(chǔ)備自動(dòng)化及監(jiān)控系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)</div>
</div>
</a>
</li>
</ul>
</div>
<a href="javascript:;" onclick="list.loadMore();" class="getmore">see more +</a>
這里只是給了10條數(shù)據(jù)，現(xiàn)在通過(guò)js代碼判斷如下：
<script>
var _content = [];
var list = {
_default:6, //默認(rèn)顯示圖片個(gè)數(shù)
_loading:3, //每次點(diǎn)擊按鈕后加載的個(gè)數(shù)
init:function(){
var lis = $(".list li");
$(".list").html("");
for(var n=0;n<list._default;n++){
lis.eq(n).appendTo(".list");
}
for(var i=list._default;i<lis.length;i++){
_content.push(lis.eq(i));
}
},
loadMore:function(){
var mLis = $(".list li").length;
for(var i =0;i<list._loading;i++){
var target = _content.shift();
if(!target){
$('.getmore').html("<p>Already shown</p>");//改變點(diǎn)擊狀態(tài)
break;
}
$(".list").append(target);//插入更多的圖片
}
}
}
list.init();
</script>

本文題目：網(wǎng)站制作之靜態(tài)頁(yè)面模擬點(diǎn)擊加載更多
網(wǎng)頁(yè)URL：http://muchs.cn/news14/245814.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、電子商務(wù)、ChatGPT、移動(dòng)網(wǎng)站建設(shè)

廣告

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