模仿网易彩票网（http://caipiao.163.com/）的登陆框自己做了一个拖动层，不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态（cursor:text;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js拖动层</title><style>body{padding:0; margin:0; width:100%; height:100%;}* html,* html body{background-image:url(about:blank);background-attachment:fixed}#dragWp{width:100%; height:100%; position:fixed; left:0; top:0; z-index:99999999; _position:absolute;_left:exPRession(eval(document.documentElement.scrollLeft));_top:expression(eval(document.documentElement.scrollTop))}#dragBg{ width:100%; height:100%; background-color:#000; position:absolute; left:0; top:0; opacity:0.4; filter:alpha(opacity=40);}#dragMain{width:200px;height:100px;position:absolute; border:1px solid #999;line-height:30px;font-size:16px;text-align:center; background-color:#FFF;}#dragTitle{ width:100%; height:40px; line-height:40px; background-color:#ccc; cursor:move;} #close{float:right; margin-right:5px; z-index:999; font-size:12px; font-style:normal; cursor:pointer;}</style> </head><body><div style="height:1200px; text-align:center;"> <h1>hello world</h1></div><div id="dragWp"> <div id="dragBg"></div> <div id="dragMain"> <div id="dragTitle"> <em id="close">关闭</em>拖动层 </div> hello world </div></div><script>window.onload=function(){ var dragWp=document.getElementById("dragWp"); var dragMainId=document.getElementById("dragMain"); var w=dragWp.offsetWidth; var h=dragWp.offsetHeight; dragMainId.style.left=(w-dragMainId.offsetWidth)/2+"px"; dragMainId.style.top=(h-dragMainId.offsetHeight)/2+"px";}function dragTemp(dragWp,dragMainId,dragTitleId,closeId,opacity){ var dragWp=document.getElementById(dragWp); var dragMainId=document.getElementById(dragMainId); var dragTitleId=document.getElementById(dragTitleId); var closeId=document.getElementById(closeId); var posX,posY,x,y; dragTitleId.onmousedown=function(e){ var e = e || window.event; posX=e.clientX-dragMainId.offsetLeft; //鼠标距离拖动层左侧的距离 posY=e.clientY-dragMainId.offsetTop; //鼠标距离拖动层上侧的距离 dragMainId.style.opacity=opacity; dragMainId.style.filter="alpha(opacity="+opacity*100+")"; document.onmousemove=function(e){ var e = e || window.event; x=e.clientX-posX; y=e.clientY-posY;// if(x<=0) x=0; //不允许移出左边// else if(x>=document.body.clientWidth-dragMainId.offsetWidth) x=document.body.clientWidth-dragMainId.offsetWidth; //不允许移出右边 dragMainId.style.left=x+"px"; dragMainId.style.top=y+"px"; dragTitleId.style.cursor="move"; document.onselectstart=function(){ return false } //拖动不选中文字 } }; document.onmouseup=function(){ document.onmousemove=null; dragMainId.style.opacity=1; dragMainId.style.filter="alpha(opacity=100)"; } if(closeId){ closeId.onclick=function(){ dragWp.style.display="none"; } }}function drag(args){ dragTemp(args.dragWp, args.dragMainId, args.dragTitleId, args.closeId || null, args.opacity || 1) }//调用drag({dragWp:"dragWp",dragMainId:"dragMain",dragTitleId:"dragTitle",closeId:"close",opacity:0.5});</script></body></html>
新闻热点
疑难解答
