下面先给大家介绍下js实现的右键菜单功能,网页的大小由内容和CSS样式表决定

4、e.clientX指的是鼠标点相对于窗口的坐标。

js拖拽功效实现代码解析,js拖拽代码剖析

本文化解的标题:

1、怎么着在网页中贯彻拖曳成效;

2、document.documentElement与document.body的区别。
document.documentElement.clientWidth指整个html文书档案的幅度,document.body.clientWidth的肥瘦。这两侧是不相似的。能够在console调控台通过console.log(document.documentElement卡塔尔和console.log(document.body卡塔尔(قطر‎实行测量检验。

3、getBoundingClientRect().left与offsetLeft的区别。
getBoundingClientRect(卡塔尔国用于获取成分的left、top、right、bottom。offset获取绝对于父级的left和top。getBoundingClientRect(卡塔尔获取绝对于窗口的left、top、right、bottom。

4、e.clientX指的是鼠标点相对于窗口的坐标。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>弹窗</title>
 <style type="text/css">
  #mask {
   position: fixed;
   left:0;
   top:0;
   width:100%;
   height: 100%;
   background-color: hsla(250,100%,50%,0.6);
   display: none;
  }
  #popBox {
   position: absolute;
   background-color: #fff;
   width:200px;
   height: 200px;
   /*left:50%;
   top:50%;*/
   /*margin-top: -100px;
   margin-left: -100px;*/
  }
 </style>
</head>
<body>
 <button id="clickBtn">点击</button>
 <div id="mask">
  <div id="popBox"></div>
 </div>
 <script type="text/javascript">
  var clickBtn = document.getElementById("clickBtn");
  var popBox = document.getElementById("popBox")
  var mask = document.getElementById("mask");
  clickBtn.onclick = function() {
   mask.style.display = "block";
   popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 + "px";
   popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 + "px";

  }
  popBox.onclick = function(e) {
   var e = e || window.event;//e指所有代码的集合,通过它可以获取事件的各种属性。
   e.cancelBubble = true;//阻止事件冒泡,即点击事件不会传递到mask这一层,意味着不会触发点击mask事件代码。
  }
  mask.onclick = function() {
   mask.style.display = "none";
  }

  //拖拽 mousedown->mousemove->mouseup 
  popBox.onmousedown = function(e) {
   var e = e || window.event;
   var pos = popBox.getBoundingClientRect();//getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。
   var oX = e.clientX - pos.left;//clientX指相对于窗口的坐标。
   var oY = e.clientY - pos.top;
   document.onmousemove = function(e) {
    var e = e || window.event;
    var oLeft = e.clientX - oX;
    var oTop = e.clientY - oY;
    popBox.style.left = oLeft + "px";
    popBox.style.top = oTop + "px";
    if (oLeft<0) {
     popBox.style.left = 0 + "px";
    };
    if (oLeft>document.documentElement.clientWidth - popBox.offsetWidth) {
     popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth + "px";//document.documentElement.clientWidth指整个html文档的宽度,document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。


    }
    if (oTop<0) {
     popBox.style.top = 0 + "px";
    };
    if (oTop > document.documentElement.clientHeight - popBox.offsetHeight) {
     popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight + "px";
    }

   }
   popBox.onmouseup = function() {
    document.onmousemove = null;
   }
  }
 </script>
</body>
</html>

上述就是本文的全体内容,希望对大家的求学抱有助于,也盼望我们多多指教帮客之家。

本文解决的难点: 1、怎么样在网页中完毕拖曳作用; 2、
document.documentElement 与 document.body 的分歧…

模仿getViewport(卡塔尔国函数,能够写出getPagearea(卡塔尔函数。

上述所述是小编给我们介绍的基于JavaScript完结右键菜单和拖拽功效,希望对我们具备助于,如若大家有此外疑问请给本身留言,我会及时过来大家的。在这里也特别谢谢大家对剧本之家网址的支撑!

上边四个函数能够用来获得相对地方的横坐标和纵坐标。

getBoundingClientRect(卡塔尔国用于获取成分的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect(卡塔尔获取相对于窗口的left、top、right、bottom。

复制代码 代码如下:

弹窗#mask {position: fixed;left:0;top:0;width:100%;height: 100%;background-color: hsla;display: none;}#popBox {position: absolute;background-color: #fff;width:200px;height: 200px;/*left:50%;top:50%;*//*margin-top: -100px;margin-left: -100px;*/}点击var clickBtn = document.getElementById;var popBox = document.getElementByIdvar mask = document.getElementById;clickBtn.onclick = function() {mask.style.display = "block";popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 + "px";popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 + "px";}popBox.onclick = function {var e = e || window.event;//e&#25351;&#25152;&#26377;&#20195;&#30721;&#30340;&#38598;&#21512;&#65292;&#36890;&#36807;&#23427;&#21487;&#20197;&#33719;&#21462;&#20107;&#20214;&#30340;&#21508;&#31181;&#23646;&#24615;&#12290;e.cancelBubble = true;//&#38459;&#27490;&#20107;&#20214;&#20882;&#27873;&#65292;&#21363;&#28857;&#20987;&#20107;&#20214;&#19981;&#20250;&#20256;&#36882;&#21040;mask&#36825;&#19968;&#23618;&#65292;&#24847;&#21619;&#30528;&#19981;&#20250;&#35302;&#21457;&#28857;&#20987;mask&#20107;&#20214;&#20195;&#30721;&#12290;}mask.onclick = function() {mask.style.display = "none";}//&#25302;&#25341; mousedown-&gt;mousemove-&gt;mouseup popBox.onmousedown = function {var e = e || window.event;var pos = popBox.getBoundingClientRect();//getBoundingClientRect()&#29992;&#20110;&#33719;&#21462;&#20803;&#32032;&#30340;left&#12289;top&#12289;right&#12289;bottom&#12290;offset&#33719;&#21462;&#30456;&#23545;&#20110;&#29238;&#32423;&#30340;left&#21644;top&#12290;getBoundingClientRect()&#33719;&#21462;&#30456;&#23545;&#20110;&#31383;&#21475;&#30340;left&#12289;top&#12289;right&#12289;bottom&#12290;var oX = e.clientX - pos.left;//clientX&#25351;&#30456;&#23545;&#20110;&#31383;&#21475;&#30340;&#22352;&#26631;&#12290;var oY = e.clientY - pos.top;document.onmousemove = function {var e = e || window.event;var oLeft = e.clientX - oX;var oTop = e.clientY - oY;popBox.style.left = oLeft + "px";popBox.style.top = oTop + "px";if  {popBox.style.left = 0 + "px";};if (oLeft&gt;document.documentElement.clientWidth - popBox.offsetWidth) {popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth + "px";//document.documentElement.clientWidth&#25351;&#25972;&#20010;html&#25991;&#26723;&#30340;&#23485;&#24230;&#65292;document.body.clientWidth&#30340;&#23485;&#24230;&#12290;&#36825;&#20004;&#32773;&#26159;&#19981;&#19968;&#26679;&#30340;&#12290;&#21487;&#20197;&#22312;console&#25511;&#21046;&#21488;&#36890;&#36807;console.log(document.documentElement)&#21644;console.log&#36827;&#34892;&#27979;&#35797;&#12290;}if  {popBox.style.top = 0 + "px";};if (oTop &gt; document.documentElement.clientHeight - popBox.offsetHeight) {popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight + "px";}}popBox.onmouseup = function() {document.onmousemove = null;}}

    while (current !== null){
      actualLeft += current.offsetLeft;
      current = current.offsetParent;
    }

右键菜单#menu {position: fixed;left:0;top:0;width:200px;height: 400px;background-color: blue;display: none;}var menu = document.getElementById;document.oncontextmenu = function {var e = e || window.event;//&#40736;&#26631;&#28857;&#30340;&#22352;&#26631;var oX = e.clientX;var oY = e.clientY;//&#33756;&#21333;&#20986;&#29616;&#21518;&#30340;&#20301;&#32622;menu.style.display = "block";menu.style.left = oX + "px";menu.style.top = oY + "px";//&#38459;&#27490;&#27983;&#35272;&#22120;&#40664;&#35748;&#20107;&#20214;return false;//&#19968;&#33324;&#28857;&#20987;&#21491;&#38190;&#20250;&#20986;&#29616;&#27983;&#35272;&#22120;&#40664;&#35748;&#30340;&#21491;&#38190;&#33756;&#21333;&#65292;&#20889;&#20102;&#36825;&#21477;&#20195;&#30721;&#23601;&#21487;&#20197;&#38459;&#27490;&#35813;&#40664;&#35748;&#20107;&#20214;&#12290;}document.onclick = function {var e = e || window.event;menu.style.display = "none"}menu.onclick = function {var e = e || window.event;e.cancelBubble = true;}// document.addEventListener("contextmenu",function{// var e = e || window.event;// e.preventDefault;// },false)

  function getElementViewTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;

好了,以上代码详细情况是js达成的右键菜单作用。上边接着给大家介绍下js
拖曳功能的代码深入分析

  var X= this.getBoundingClientRect().left;

document.documentElement.clientWidth指整个html文书档案的幅度,document.body.clientWidth的幅度。这两侧是区别等的。可以在console调节台通过console.log(document.documentElement卡塔尔和console.log进行测量检验。

  function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;

2、document.documentElement与document.body的区别。

复制代码 代码如下:

1、怎么着在网页中完毕拖曳功用。

scrollTop和scrollLeft属性是足以赋值的,而且会立刻自动滚动网页到相应岗位,由此得以行使它们更改网页成分的相对地方。其它,element.scrollIntoView(卡塔尔(英语:State of Qatar)方法也会有周围意义,能够使网页成分出以往浏览器窗口的左上角。

那生机勃勃章肃清的题目

  var Y
=this.getBoundingClientRect().top+document.documentElement.scrollTop;

上边先给我们介绍下js达成的右键菜单功效,具体详细情况如下所示:

复制代码 代码如下:

那大器晚成章解决的标题

    return actualLeft-elementScrollLeft;
  }

3、getBoundingClientRect().left与offsetLeft的区别。

2)大好多气象下,都以document.documentElement.clientWidth重临准确值。可是,在IE6的quirks格局中,document.body.clientWidth再次来到准确的值,由此函数中投入了对文书档案方式的判别。

2、阻止默许事件的莫过于行使。

  function getViewport(){
    if (document.compatMode == “BackCompat”){
      return {
        width: document.body.clientWidth,
        height: document.body.clientHeight
      }
    } else {
      return {
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight
      }
    }
  }

1、实现右键菜单功用代码。

由于在报表和iframe中,offsetParent对象未必等于父容器,所以地点的函数对于表格和iframe中的成分不适用。

除了这些之外上面的函数以外,还只怕有生机勃勃种高效方法,能够立即拿到网页成分的职位。

故此,网页成分的周旋地方便是

上面包车型地铁课程总计了Javascript在网页定位方面包车型大巴相关知识。
一、网页的…

  function getElementViewLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;

网页上的每一种元素还应该有scrollHeight和scrollWidth属性,指包罗滚动条在内的该因素的视觉面积。

    return actualTop;
  }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章