日期:2014-05-16 浏览次数:20435 次
<!DOCTYPE HTML>
<html>
<head>
<title>soul42</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<STYLE type="text/css">
* { margin:0; padding:0;}
#box{width:30px;margin:200px auto 0 ;display:block;position:relative;}
.wrap{margin:0;width:200px;position:absolute;top:0;left:0;overflow:hidden; background:red}
ul{position:absolute;top:0px;left:0;width:200px;}
li{height:20px;background:orange;margin-bottom:0px}
</STYLE>
</head>
<body>
<DIV style="POSITION: absolute; WIDTH: 50px; BACKGROUND: #f00; HEIGHT: 50px; LEFT: 0px" id="mydiv"></DIV>
<script type="text/javascript">
var $ = function(id){return document.getElementById(id)}
var objEvent = {
addEvent:function(elem,type,func){
var _this = this;
if(elem.addEventListener){
elem.addEventListener(type,func,false);
}else if(elem.attachEvent){
elem.attachEvent("on"+type,func)
}else{
elem["on"+type] = func
}
},
getEvent:function(e){
return e = e|| window.event;
},
func:function(e){
e = objEvent.getEvent(e);
var posX = e.clientX - $("mydiv").offsetLeft;
(function(){
objEvent.addEvent(document,"mousemove",function(e){
e = objEvent.getEvent(e);
$("mydiv").style.left = (e.clientX - posX) +"px";
});
objEvent.addEvent(document,"mouseup",function(){
objEvent.addEvent(document,"mousemove",null);
//document.onmousemove = null;
})
/*document.onmousemove = function(e){
e = objEvent.getEvent(e);
$("mydiv").style.left = (e.clientX - posX) +"px";
}
document.onmouseup = function(e){
document.onmousemove = null;
}*/
})()
}
}
objEvent.addEvent($("mydiv"),"mousedown",objEvent.func);
</script>
</body>
</html>