js学习事件-----js模仿手机下拉刷新（1）
来源：互联网 发布：怎样安装photoshop软件 编辑：程序博客网 时间：2024/04/29 09:57
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>require AMD</title> <style> /*重置css*/ body,html,ul,ol,li{padding: 0;margin: 0;border: none;} ul,ol{list-style:none;} a{-webkit-transition: all .2s; text-decoration:none;color:#333; } #content{position:absolute;height: 300px;width: 200px;border: 1px #000000 solid; background-color:#f0ad4e;overflow: hidden;} #sc{height:100px;width:100px;top:20px;left:50px;background: #1dc116; overflow-y:auto;overflow-x: visible; } .list{position: absolute;width: 100%;height: 100%;top:0px;background-color:white;} .list li {position: relative;} .list li a.more{ position: absolute; bottom:0px; right:10px; } .list li .img{margin-right: -60px; float: left; margin: -1px 0;} .list li .show{margin-left: 65px;word-break:break-all; font-size:12px; line-height:20px; color:#666; padding-right:10px; } .list li .img img{width: 50px; height: 50px;} .list li{border-bottom: 1px solid #B6B6B6; overflow: hidden; padding: 5px 0;} /*滚动条*/ .scrollbar { position: absolute; top: 0px; right: 0px; bottom: 0px; width: 2px; background: #000000; } .scrollbar .handle { width: 100%; height: 100px; background: #40AA53;/*拖动条*/ cursor: pointer; } .scrollbar .handle .mousearea { position: absolute; top: 0; left: -5px; width: 12px; height: 100%; } /*顶部消息提示框*/ .topTips{ z-index : 999; overflow : hidden; height : 0px; font-size: 12px; line-height: 0px; position : absolute; width: 100%; background: #F5F5F5 url("http://git.oschina.net/assets/logo-white.png") no-repeat right 40px bottom -8px; background-size: 30px; top:0px; left:0px; box-shadow: 0px 0px 3px rgba(0,0,0,0.2) inset; text-align: center; display : none; } </style></head><body> <div id="content"> <!--顶部提示--> <div class="topTips" id="topTips"> 松开就加载 </div> <!--列表--> <div id="list" onmousedown="handler1(event)" class="list"> <ul> <li> <div class="img"> <a target="_blank" href="http://my.oschina.net/u/874335"> <img alt="拜仁慕尼黑" src="http://static.oschina.net/uploads/user/437/874335_50.jpg?t=1385694353000"> </a> </div> <div class="show"> 啦啦啦啦啦啦....... <a class="more" target="_blank" href="http://my.oschina.net/u/874335/tweet/3056233">>>>></a> </div> </li> <li> <div class="img"> <a target="_blank" href="http://my.oschina.net/u/1424783"> <img alt="宏哥" src="http://static.oschina.net/uploads/user/48/96003_50.jpg?t=1368158428000"> </a> </div> <div class="show"> 费了老子一下午的时间，不过搞定了，又重新整理了一下知识.... <a class="more" target="_blank" href="http://my.oschina.net/u/1424783/tweet/3056244">>>>></a> </div> </li> <li> <div class="img"> <a target="_blank" href="http://my.oschina.net/u/947559"> <img alt="丫头潘潘" src="http://static.oschina.net/uploads/user/473/947559_50.jpg?t=1372838864000"> </a> </div> <div class="show"> <a rel="nofollow" target="_blank" href="http://my.oschina.net/u/130291"> @蟋蟀哥哥//敢不敢这么nb.....：）! </a> <a class="more" target="_blank" href="http://my.oschina.net/u/947559/tweet/3056236">>>>></a> </div> </li> </ul> </div> <div class="scrollbar"> <!--拖动控制--> <div class="handle"> <!----> <div class="mousearea"></div> </div> </div> </div> <script> //滚动条的事件 // var posx= 0,posy=0;//mousedown时pageX pageY var absx= 0,absy=0;//元素相对页面的位置 var target=document.getElementById("list"); var topTips=document.getElementById("topTips"); var isOver=false;//控制提示状态的 var handler2=function(event){ console.log("mousemove"); var mouseY=event.pageY; //top=mouseY-2*posy+absy if(mouseY-posy>5&&!isOver){ topTips.style.display="block"; topTips.style.height=(mouseY-posy)+"px"; } target.style.top=(mouseY-posy+absx)+"px"; }; /***获取当前元素相对于页面的位置***/ function getX(obj){ var parObj=obj; var left=obj.offsetLeft; while(parObj=parObj.offsetParent){ left+=parObj.offsetLeft; } return left; } function getY(obj){ var parObj=obj; var top=obj.offsetTop; while(parObj = parObj.offsetParent){ top+=parObj.offsetTop; } return top; } document.addEventListener("mouseup",handler1); function handler1(e){ var target1=e.target? e.target: e.srcElement; console.log(target.id); switch(e.type){ case "mousedown": if(target1.id="list"){ isOver=false; posx= e.pageX; posy= e.pageY; absx=getX(target); absy=getY(target); console.log("movedown"); target.addEventListener("mousemove",handler2); } break; case "mouseup": //在div上松开触发 console.log("mouseup"); //tt.destroy(); posx= 0; posy= 0; target.style.top="0px"; topTips.style.display="none"; topTips.style.height="0px"; isOver=true; target.removeEventListener("mousemove",handler2); console.log("removed"); break; } } </script> <script> /** * event的属性： * IE: * screenX,screenY * clientX,clientY 相对于可视区域的位置 * offestX,offestY 相对引起事件的对象 * x,y 相对引起事件的对象的父元素 * DOM: * screenX,screenY * clientX,clientY 相对于可视区域的位置，滚动时相对于可视区域的位置是变化的，但是相对于页面的位置不会发生改变。 * pageX,pageY 相对于页面的位置 * * //IE中不支持：pageX pageY * IE中的pageX计算 * PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同) * 页面上的位置=可视区域位置+页面滚动条切去高度-自身border高度。 * jquery中pageX和pageY * if(event.pageX==null){ * event.pageX = event.clientX + ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.clientLeft || body && body.clientLeft || 0 ); * event.pageY = event.clientY + ( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.clientTop || body && body.clientTop || 0 ); * } * * 元素的位置属性： * * */ function handler(e){ var target=e.target? e.target: e.srcElement, posx= e.pageX,//鼠标在客户端的位置 posy= e.pageY; console.log(target.id+ e.button); if(e&&target.id=="sc"&&e.button==0){ //alert("aa"); var parent=document.getElementById("content"); //target.style.top=(posx-target.pageX)+"px"; //元素对象: //offest：自身元素的属性 //offsetLeft 距离上方或上层控件的位置,整型，单位像素 //offsetTop 距离左方或上层控件的位置,整型，单位像素 //offsetWidth 指 obj 控件自身的宽度，整型，单位像素。 //offsetHeight 指 obj 控件自身的高度，整型，单位像素。 /** * offset与style.left,top,height,width的区别 *1 offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。 2 offsetTop 只读，而 style.top 可读写。 3 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串 四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释，这里说的是 document.body，如果是 HTML 控件，则又有不同 */ //（元素可视区域的的高度) //clientHeight:内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关 // offsetHeight //IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 //NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。 //scrollHeight //IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。 //NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。 //clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可 console.log(posx+"--"+posy+"||" +target.offsetTop+"--" +target.offsetLeft+"||" +target.offsetWidth +"--"+target.offsetHeight +"||"+target.clientHeight //可视区域的高度 +"||"+target.scrollHeight //实际的高度 +"||"+target.scrollTop //卷起的高度,不同的浏览器默认值不一样 +"||"+target.scrollWidth+"--"+target.scrollHeight //滚动条的高度和宽度和offestWidth..相同，不同的浏览器不一样 +""); } } /** * javaScript (ECMAScript262规范) * ECMAScript262规范:javaScript语法和内置对象，实现引擎的一些约定。 * javaScript（Netscape的一种实现） * 面向对象的解释性弱类型的编程语言。 * 开发环境： * js引擎,用于预编译（相对的）和解析代码并执行程序的引擎。 * 需要宿主，常用的浏览器都预装了js引擎，用于解释执行jsCode。 * * */ </script></body></html>
0 0
- js学习事件-----js模仿手机下拉刷新（1）
- js 侦听手机摇动事件，模仿微信摇一摇功能
- js下拉刷新
- JS 下拉刷新页面
- js手机端下拉刷新代码(无需插件)
- JS设置页面下拉刷新
- 原生JS实现下拉刷新
- 浅谈 js 模仿手机的 动作
- appcan与iscroll.js结合下拉刷新（转）
- canvas下拉刷新--模仿水滴
- 模仿美团下拉刷新
- webview里面的js下拉刷新
- React.js中实现下拉刷新
- vue.js 下拉刷新插件(demo)
- 模仿combbox的创建下拉列表js支持动态选项
- JS学习12（事件）
- 手机触摸屏的JS事件
- 手机触摸屏的JS事件
- 未能找到任何适合于指定的区域性或非特定区域性的资源 - 终极解决方案
- Insert Interval
- linux中GFP_KERNEL
- 2014 工作感悟
- JsonMappingException: failed to lazily initialize及could not initialize异常
- js学习事件-----js模仿手机下拉刷新（1）
- Genesis-3D学习手册——21.地形植被
- Linux安装mysql——源码安装
- Tsung安装使用说明
- C++ const
- SSL和SSH有什么区别
- Genesis-3D学习手册——22.高度图
- poj 1050 To the Max
- linux md5运用。。。
