html仿照聊天下拉刷新,js学习事件-----js模仿手机下拉刷新（1）

require AMD

/*重置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;

}

松开就加载

• 

  啦啦啦啦啦啦.......

  >>>>

• 

  费了老子一下午的时间，不过搞定了，又重新整理了一下知识....

  >>>>

• 

  @蟋蟀哥哥//敢不敢这么nb.....：)!

  >>>>

//滚动条的事件

//

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;

}

}

/**

* 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。

*

*

*/