/*重置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;
}
//滚动条的事件
//
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。
*
*
*/