jQuery加載更多功能 · 前端開發

jQuery加載更多1： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <body> <div> test-123 <div id = "showdiv" style="display:none;">test-456</div> <br/> <a href="#" onclick="showHideCode()">查看更多</a> </div> <script> function showHideCode(){ $("#showdiv").toggle(); } </script> </body> </html> ~~~ jQuery加載更多2： ~~~ <!doctype html> <html> <head> <meta charset="utf-8"> <title>JS顯示前面文字</title> <style> #box button{ display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; color: #fff; background-color: #5bc0de; border-color: #46b8da; } </style> </head> <body> <div id="box"> <h2>JS顯示前面文字</h2> <p>JS顯示前面文字JS顯示前面文字JS顯示前面文字JS顯示前面文字</p> <p>JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-</p> <p><strong>JS顯示前面文字-</strong></p> <p>JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-</p> <p>JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-</p> <p>JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-JS顯示前面文字-</p> </div> <script> function show(){ var box = document.getElementById("box"); var text = box.innerHTML; var newBox = document.createElement("div"); var btn = document.createElement("a"); newBox.innerHTML = text.substring(0,200); btn.innerHTML = text.length > 200 ? "<center><button>顯示全部</button></center>" : ""; btn.href = "###"; btn.onclick = function(){ if (btn.innerHTML == "<center><button>顯示全部</button></center>"){ btn.innerHTML = "<center><button>收起</button></center>"; newBox.innerHTML = text; }else{ btn.innerHTML = "<center><button>顯示全部</button></center>"; newBox.innerHTML = text.substring(0,200); } } box.innerHTML = ""; box.appendChild(newBox); box.appendChild(btn); } show(); </script> </body> </html> ~~~ jQuery加載更多3： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <body> <div class="loaddown"> <div class="hidden"> <div class="title1">123-1</div> <div class="title1">456-1</div> <div class="title1">123-2</div> <div class="title1">456-2</div> <div class="title1">123-3</div> <div class="title1">456-3</div> </div> <ul class="list">數據加載中，請稍后...</ul> <div class="more"><a href="javascript:;" onClick="loaddown.loadMore();">加載更多</a></div> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> var _content = []; //臨時存儲li循環內容 var loaddown = { _default:2, //默認顯示圖片個數 _loading:2, //每次點擊按鈕后加載的個數 init:function(){ var lis = $(".hidden .title1"); $("ul.list").html(""); for(var n=0;n<loaddown._default;n++){ lis.eq(n).appendTo("ul.list"); } $("ul.list img").each(function(){ $(this).attr('src',$(this).attr('realSrc')); }) for(var i=loaddown._default;i<lis.length;i++){ _content.push(lis.eq(i)); } $(".hidden").html(""); }, loadMore:function(){ var mLis = $("ul.list li").length; for(var i =0;i<loaddown._loading;i++){ var target = _content.shift(); if(!target){ $('.more').html("<p>我們會持續更新。。</p>"); break; } $("ul.list").append(target); $("ul.list img").eq(mLis+i).each(function(){ $(this).attr('src',$(this).attr('realSrc')); }); } } } loaddown.init(); </script> </body> </body> </html> ~~~