问答详情
源自:8-2 综合实战题

如果放在js文件中当点击按钮时应该怎么将这些函数组合在一起,初学者勿喷

window.onload=function(){



   var btnLoad=document.getElementById("btnLoad");

       btnLoad.onclick=function(){

        showDialog();


    var btnOnClose=document.getElementById("btnOnClose");

        btnOnClose.onclick=function(){

         hideDialog();

        }

  }

 

//获取元素对象

function g(id){

return document.getElementById(id);

}


//自动居中


function autoCenter( el ){


//获得可视区的宽度高度

var bodyW=document.documentElement.clientWidth||document.body.clientWidth;

    var bodyH=document.documentElement.clientHeight||document.body.clientHeight;

     

        //获得元素的宽度高度


        var elW=el.offsetWidth;

        var elH=el.offsetHeight;


        //可视区的宽度高度减去元素的宽度高度/2

       el.style.left = ( bodyW - elW  ) / 2  + 'px';

       el.style.top  = ( bodyH - elH  ) / 2  + 'px';

}


//自动全屏


function fillToBody( el ){

el.style.width=document.documentElement.clientWidth||document.body.clientWidth;

el.style.height=document.documentElement.clientHeight||document.body.clientHeight;

}


     mouseOffsetX=0

     mouseOffsetY=0;//偏移量


     isDraging=true;

//鼠标事件1:在标题栏按下要计算鼠标相对于拖拽元素左上角的位置,并且标记元素为可拖动

    g("dialogTitle").onmousedown=function( e ){

    var e= e || window.event;


    var mouseOffsetX=e.pageX-g("dialogTitle").offsetLeft;

    var mouseOffsetY=e.pageX-g("dialogTitle").offsetTop;


    isDraging=true;

    }


//鼠标事件2:鼠标移动时要监测元素是否为可拖动,如果是则更新元素的位置,到当前元素的位置

     document.onmousemove=function( e ){

      var e= e ||window.event;


      var mouseX=e.pageX;

      var mouseY=e.pageY;//鼠标当前的位置


      var moveX=0;

      var moveY=0;//浮层元素的新位置


      if(isDraging===true){


      var moveX=mouseX-mouseOffsetX;

      var moveY=mouseY-mouseOffsetY;


      //范围限定 moveX>0,并且moveX<(页面最大宽度-浮层元素的宽度)


      var pageWidth=document.documentElement.clientWidth||document.body.clientWidth;

      var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;


      var dialogWidth=g("dialog").offsetWidth;

      var dialogHeight=g("dialog").offsetHeight;


      var maxX=pageWidth-dialogWidth;

      var maxY=pageHeight-dialogHeight;


      moveX=Math.min( maxX, Math.max(0,moveX));

      moveY=Math.min( maxY, Math.max(0,moveY));


      g("dialog").style.left=moveX+'px';

      g("dialog").style.top=moveY+'px';

      }

     }


//鼠标事件3:鼠标松开时要标记元素为不可拖动


document.onmouseup=function(){

isDraging=false;

}


//展现登录浮层


function showDialog(){

g("dialog").style.display="block";

g("mask").style.display="block";

autoCenter("dialog");

fillToBody(g("mask"));

}

  function hideDialog(){

    g("dislog").style.display="none";

    g("mask").style.display="none";

  }

  window.onresize=function(){

    autoCenter(g("dialog"));

    fillToBody(g("mask"));

  }

}


提问者:成长前端初学者 2016-12-20 14:04

个回答

  • qq_一桶江山_03711332
    2017-01-09 20:49:12

    完全没明白的啥意思