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

2023-03-19 分類：網(wǎng)站建設(shè)

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

頁面整體簡潔大方，要實(shí)現(xiàn)的功能是：頁面打開默認(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)容更好的嵌接在一起顯示等問題，都需要通過JS的代碼來實(shí)現(xiàn)。
為此在頁面布局上html代碼如下:

查看更多+

重慶陸軍軍醫(yī)大學(xué)

生物信息學(xué)及醫(yī)學(xué)超級計(jì)算系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)

查看更多+

漯河糧庫項(xiàng)目

糧食儲備自動化及監(jiān)控系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)

查看更多+

精銳視覺智能科技有限公司

OA系統(tǒng)及CRM系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)

查看更多+

采用MRTU的實(shí)時(shí)油井監(jiān)測系統(tǒng)

生物信息學(xué)及醫(yī)學(xué)超級計(jì)算系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)

查看更多+

智能水網(wǎng)和泵站監(jiān)測

糧食儲備自動化及監(jiān)控系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)

查看更多+

建設(shè)銀行災(zāi)備中心機(jī)房KVM的使用

OA系統(tǒng)及CRM系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)

查看更多+

智能水網(wǎng)和泵站監(jiān)測

糧食儲備自動化及監(jiān)控系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)

查看更多+

智能水網(wǎng)和泵站監(jiān)測

糧食儲備自動化及監(jiān)控系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)

查看更多+

智能水網(wǎng)和泵站監(jiān)測

糧食儲備自動化及監(jiān)控系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)

查看更多+

智能水網(wǎng)和泵站監(jiān)測

糧食儲備自動化及監(jiān)控系統(tǒng) IT基礎(chǔ)設(shè)施建設(shè)

see more +
這里只是給了10條數(shù)據(jù)，現(xiàn)在通過js代碼判斷如下：

案例2

新聞名稱：網(wǎng)站制作之靜態(tài)頁面模擬點(diǎn)擊加載更多
當(dāng)前網(wǎng)址：http://muchs.cn/news/245814.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站策劃、做網(wǎng)站、搜索引擎優(yōu)化、移動網(wǎng)站建設(shè)

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

猜你還喜歡下面的內(nèi)容