首页 > 代码库 > js拖动层
js拖动层
模仿网易彩票网（http://caipiao.163.com/）的登陆框自己做了一个拖动层，不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态（cursor:text;)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>js拖动层</title> 6 <style> 7 body{padding:0; margin:0; width:100%; height:100%;} 8 * html,* html body{background-image:url(about:blank);background-attachment:fixed} 9 #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))}10 #dragBg{ width:100%; height:100%; background-color:#000; position:absolute; left:0; top:0; opacity:0.4; filter:alpha(opacity=40);}11 #dragMain{width:200px;height:100px;position:absolute; border:1px solid #999;line-height:30px;font-size:16px;text-align:center; background-color:#FFF;}12 #dragTitle{ width:100%; height:40px; line-height:40px; background-color:#ccc; cursor:move;} 13 #close{float:right; margin-right:5px; z-index:999; font-size:12px; font-style:normal; cursor:pointer;}14 </style> 15 </head>16 <body>17 <div style="height:1200px; text-align:center;">18 <h1>hello world</h1>19 </div>20 <div id="dragWp">21 <div id="dragBg"></div>22 <div id="dragMain">23 <div id="dragTitle">24 <em id="close">关闭</em>拖动层25 </div>26 hello world27 </div>28 </div>29 <script>30 window.onload=function(){31 var dragWp=document.getElementById("dragWp");32 var dragMainId=document.getElementById("dragMain");33 var w=dragWp.offsetWidth;34 var h=dragWp.offsetHeight;35 dragMainId.style.left=(w-dragMainId.offsetWidth)/2+"px";36 dragMainId.style.top=(h-dragMainId.offsetHeight)/2+"px";37 }38 39 function dragTemp(dragWp,dragMainId,dragTitleId,closeId,opacity){40 var dragWp=document.getElementById(dragWp);41 var dragMainId=document.getElementById(dragMainId);42 var dragTitleId=document.getElementById(dragTitleId);43 var closeId=document.getElementById(closeId);44 var posX,posY,x,y;45 dragTitleId.onmousedown=function(e){46 var e = e || window.event;47 posX=e.clientX-dragMainId.offsetLeft; //鼠标距离拖动层左侧的距离48 posY=e.clientY-dragMainId.offsetTop; //鼠标距离拖动层上侧的距离49 dragMainId.style.opacity=opacity;50 dragMainId.style.filter="alpha(opacity="+opacity*100+")";51 document.onmousemove=function(e){52 var e = e || window.event;53 x=e.clientX-posX;54 y=e.clientY-posY;55 // if(x<=0) x=0; //不允许移出左边56 // else if(x>=document.body.clientWidth-dragMainId.offsetWidth) x=document.body.clientWidth-dragMainId.offsetWidth; //不允许移出右边57 dragMainId.style.left=x+"px";58 dragMainId.style.top=y+"px";59 dragTitleId.style.cursor="move";60 document.onselectstart=function(){ return false } //拖动不选中文字61 }62 };63 document.onmouseup=function(){64 document.onmousemove=null;65 dragMainId.style.opacity=1;66 dragMainId.style.filter="alpha(opacity=100)";67 }68 if(closeId){69 closeId.onclick=function(){70 dragWp.style.display="none"; 71 }72 }73 }74 function drag(args){75 dragTemp(args.dragWp,76 args.dragMainId,77 args.dragTitleId,78 args.closeId || null,79 args.opacity || 1) 80 }81 //调用82 drag({dragWp:"dragWp",dragMainId:"dragMain",dragTitleId:"dragTitle",closeId:"close",opacity:0.5});83 </script>84 </body>85 </html>
js拖动层
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。