织梦如何做加载更多...
查了很多资料发现都没有写织梦如何做加载更多!
下面我用一个小脚本实现下织梦加载更多怎么做!

原理就是 设置层的高度! 然后溢出隐藏!  利用脚本! 点击加载更多后增加层高度! 就可以简单模仿加载更多了! 


html部分代码
  1.   
  2. <div class="ss">   
  3. <div class="kk">   
  4. <div class="cc">www.xhcss.com更多精彩与你共享麻烦点下广告</div>   
  5. <div class="cc">www.xhcss.com更多精彩与你共享麻烦点下广告</div>   
  6. <div class="cc">www.xhcss.com更多精彩与你共享麻烦点下广告</div>   
  7. <div class="cc">www.xhcss.com更多精彩与你共享麻烦点下广告</div>   
  8. <div class="cc">www.xhcss.com更多精彩与你共享麻烦点下广告</div>   
  9. <div class="cc">www.xhcss.com更多精彩与你共享麻烦点下广告</div>   
  10. <div class="cc">www.xhcss.com更多精彩与你共享麻烦点下广告</div>   
  11. <div class="cc">www.xhcss.com更多精彩与你共享麻烦点下广告</div>   
  12. <div class="cc">www.xhcss.com更多精彩与你共享麻烦点下广告</div>   
  13. </div>   
  14.   
  15. </div>   
  16. <div class="zz">   
  17.   
  18. 加载更多</div>   
  19. <div class="sq">收起</div>  

css部分
  1. <style>   
  2. .ss{height:200pxbackground:#000;overflow:hiddenwidth:600pxtext-align:centerline-height:50px; }   
  3. .zz{ height:68px;  width:100%;font-size:48pxfont-weight:boldline-height:48px;}   
  4. .sq{height:68px;  width:100%;font-size:48pxfont-weight:boldline-height:48px; }   
  5. .cc{height:50pxmargin-top:6pxbackground:#265465;color:#fff;}   
  6. .sq{height:20pxwidth:100%}   
  7. </style>  

jquery部分
  1. <script type="text/javascript" src="http://www.xhcss.com/js/jquery.js"></script>    
  2. <script type="text/javascript">      
  3. $(document).ready(function(){      
  4.   
  5.     var i=1;      
  6. var x=$(".kk").outerHeight(true);     
  7. $(".zz").click(function(){      
  8. $(".sq").click(function(){   
  9. $(".ss").css("height","200");   
  10. i=1;   
  11. $(".zz").html("加载更多");   
  12.  return false;   
  13. });   
  14. var c=$(".ss").outerHeight(true);   
  15. if(x>c){   
  16.     i++;      
  17.     var s=i*183;    //这里是每次点击增加高度    
  18. $(".ss").css("height",s);    
  19. var h=$(".ss").outerHeight(true);     
  20.   return false;   
  21. }else{   
  22. $(".zz").html("没有更多内容");   
  23.   
  24. };   
  25.   });     
  26.         
  27. });      
  28. </script>  

写的好!

微信扫一扫赏大洋