|
window.οnlοad=function(){
? ? ? ? ? ? var login=document.getElementById('login'); ? ?//获取包裹图片的id
//在触发鼠标按下事件后在触发鼠标移动事件，最后触发鼠标松开的事件
? ? ? ? ? ? login.οnmοusedοwn=function(e){ ? ? ? //鼠标按下登录框区域时触发
? ? ? ? ? ? ? ? var e=e||window.event; ? ? ?//兼容ie和firefox
//获取鼠标在图片中的位置，到时图片移动的位置为鼠标相对于页面的y和x轴的距离减去在图片内的距离，clientX，clientY分别为鼠标相对于页面的y和x轴的位置，offsetLeft和offsetTop是图片相对于页面的y和x轴的位置
? ? ? ? ? ? ? ? var diffX=e.clientX-login.offsetLeft; ? //鼠标坐标值-登录框到左端的距离=鼠标到弹框左边的距离,下边同理
? ? ? ? ? ? ? ? var diffY=e.clientY-login.offsetTop; ? ?
? ? ? ? ? ? ? ? if(diffX>0&&diffY>0){
? ? ? ? ? ? ? ? ? ? document.οnmοusemοve=function(e){ ? ? //触发鼠标移动事件
? ? ? ? ? ? ? ? ? ? ? ? login.style.left=e.clientX-diffX 'px'; ? ?//不断移动过程中，鼠标坐标值-鼠标到弹框左边的距离即登录框到页面的左边距离不断更新，实现拖拽效果
? ? ? ? ? ? ? ? ? ? ? ? login.style.top=e.clientY-diffY 'px';
? ? ? ? ? ? ? ? ? ? ? ? var cw=document.documentElement.clientWidth||document.body.clientWidth; ? //兼容ie和firefox，获取网页可视区域宽、高
? ? ? ? ? ? ? ? ? ? ? ? var ch=document.documentElement.clientHeight||document.body.clientHeight;
? ? ? ? ? ? ? ? ? ? ? ? if(e.clientX-diffX<0){ ? //看下图3情形，判断已出左边界
? ? ? ? ? ? ? ? ? ? ? ? ? ? login.style.left='0px'; ? //出界都重置为0px
? ? ? ? ? ? ? ? ? ? ? ? }else if(e.clientX-diffX>cw-login.offsetWidth){ ? //看下图2情形，判断已出右边界
? ? ? ? ? ? ? ? ? ? ? ? ? ? login.style.left=cw-login.offsetWidth 'px'; ? //重置为左边最大值
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? if(e.clientY-diffY<0){ ? //与上同理
? ? ? ? ? ? ? ? ? ? ? ? ? ? login.style.top='0px';
? ? ? ? ? ? ? ? ? ? ? ? }else if(e.clientY>ch-login.offsetHeight){
? ? ? ? ? ? ? ? ? ? ? ? ? ? login.style.top=ch-login.offsetHeight 'px';
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? } ? ?
? ? ? ? ? ? ? ? document.οnmοuseup=function(){ ? ?//鼠标抬起时，鼠标按下与移动事件为null
? ? ? ? ? ? ? ? ? ? document.οnmοusemοve=null;
? ? ? ? ? ? ? ? ? ? document.οnmοuseup=null;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
|