下拉刷新
2015-08-11 09:25
357 查看
JS版 <!doctype html> <html> <head> <meta charset="utf-8"> <title>下拉刷新</title> <style> body{ margin:0px auto; padding:0px; } *{ margin:0px auto; padding:0px; } #mainContent{ margin-top:20px; width:200px; height:300px; border:1px solid #ccc; overflow:scroll; } .mycontent{ width:100%; height:100%; } #slideDown1{ width:100%; height:20px; background:#3CF; } #slideDown1 p{ text-align:center; font-size:14px; } li{ list-style-type:none; text-align:center; } </style> </head> <body> <div id="mainContent"> <div class="myContent"> <ul> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> <li>item1-item-1-itemt1</li> </ul> </div> <div id="slideDown1" style="display:none"> <p>加载中,请稍后....</p> </div> </div> <script> var obj=document.getElementById("mainContent"); function frush(obj){ var newobj=document.createElement("div"); var ul=document.createElement("ul"); for(var i=0;i<16;i++){ var li=document.createElement("li"); li.innerHTML="scroll1--scrolll2--scroll3"; ul.appendChild(li); } newobj.appendChild(ul); var sd=document.getElementById("slideDown1"); obj.insertBefore(newobj,sd); } obj.onscroll=function(){ var scrollT=obj.scrollTop; var scrollH=obj.scrollHeight; var clientH=obj.clientHeight; if(scrollT==scrollH-clientH){ //alert("到达最底部了"); var sd=document.getElementById("slideDown1"); sd.style.display="block"; window.setTimeout("frush(obj)",1000); } } </script> </body> </html> JQuery版 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="jquery-1.9.1.js"></script> <script> $(function(){ $("#showInfo").scroll(function(){ if($(this).height()+$(this).scrollTop()==$("#innerInfo").outerHeight(true)){ var str="<p>你好"+new Date()+"</p>"+"<p>你好"+new Date()+"</p>"+"<p>你好"+new Date()+"</p>"+"<p>你好"+new Date()+"</p>"+"<p>你好"+new Date()+"</p>"; $("#innerInfo").html( $("#innerInfo").html()+str ); } }); }); </script> <style> *{ padding:0px; margin:0px auto; } #showInfo{ width:200px; height:200px; overflow-y:scroll; border:1px solid #F93; } </style> </head> <body> <div id="showInfo"> <div id="innerInfo"> <p>你好,中国。</p> <p>你好,中国。</p> <p>你好,中国。</p> <p>你好,中国。</p> <p>你好,中国。</p> <p>你好,中国。</p> <p>你好,中国。</p> <p>你好,中国。</p> <p>你好,中国。</p> <p>你好,中国。</p> <p>你好,中国。</p> <p>你好,中国。</p> </div> </div> </body> </html> |
相关文章推荐
- 《數據結構與算法分析:C語言描述》習題1.1代碼及自己的想法
- 《设计模式》读书笔记
- 转载_Quora如何在快速开发中保持高品质代码
- Tomcat请求处理过程(Tomcat源码解析五)
- 16-集合框架-01-常用对象API(集合框架-概述)
- poj 3461 Oulipo
- Understand the Business Domain
- hdu 4578 Transformation 线段树
- OC:方法
- C与C++中const区别
- c++迭代器失效
- poj 3126 Prime Path
- 16-04-常用对象API(基本数据类型对象包装类-JDK1.5自动装箱拆箱)
- 16-05-常用对象API(基本数据类型对象包装类-练习)
- day18
- Try Before Choosing
- iOS开发之使用Storyboard预览UI在不同屏幕上的运行效果
- hdu4763 KMP
- 风雨20年:我所积累的20条编程经验
- linux安装php扩展json