日期:2014-05-16 浏览次数:20335 次
<!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>