阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 鼠标放大镜左侧商品

      1

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
          <style>
              #div1{width: 400px;height: 400px;background: orange;}
              #newDiv{width: 100px;height: 100px;background: red;position: absolute;color: black;}
          </style>
      </head>
      <body>
      <div id="div1"></div>
      </body>
      </html>
      <script>
          var oDiv=document.getElementById("div1");
          oDiv.onmouseenter=function(event) {
              var event=event||window.event;
              var newDiv=document.createElement("div");
              newDiv.id="newDiv";
              this.appendChild(newDiv);//this添加,而不是document.body;
              /*下面是offsetWidth只能算文档树里的,所以需要先把创建的newDiv添加到文档树里面*/
              newDiv.style.left=event.clientX-newDiv.offsetWidth/2+"px";
              newDiv.style.top=event.clientY-newDiv.offsetHeight/2+"px";
          };
          oDiv.onmousemove=function(event) {
              event=event||window.event;
              var newDiv=document.getElementById("newDiv");
              if(newDiv){
                  newDiv.style.left=event.clientX-newDiv.offsetWidth/2+"px";
                  newDiv.style.top=event.clientY-newDiv.offsetHeight/2+"px";
              }
      
          };
          oDiv.onmouseleave= function (event) {
              var newDiv=document.getElementById("newDiv");
              if(newDiv){
                  newDiv.parentNode.removeChild(newDiv);
              }
          };
      
      
          function setMark(newDiv, event) {
              event = event || window.event;
              //上面是绑定事件的标配;
              //获取mark这个div的宽度和高度;并且让mark这个DIV显示在鼠标出现位置的正中间;
              newDiv.style.left =event.clientX-newDiv.offsetWidth/2+"px";
              newDiv.style.top =event.clientY-newDiv.offsetHeight/2+"px";
              //下面是判断边界,当鼠标移到左边界和右边界的判断;
              if (l < 0) {
                  newDiv.style.left = 0 + "px";
              } else if (l > (tabW - markW)) {
                  newDiv.style.left = tabW - markW + "px";
              }
              //当鼠标移到上边界和下边界的判断;
              if (t < 0) {
                  newDiv.style.top = 0 + "px";
              } else if (t > (tabH - markH)) {
                  newDiv.style.top = tabH - markH + "px";
              }
          };
      
      
      
      
      
      
      
      
      
      
      
      
      </script>
      

      2

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
          <style>
              body{margin: 0;padding: 0;}
              #div1{width: 400px;height: 400px;background: orange;margin: 50px auto;}
              #newDiv{width: 100px;height: 100px;background: red;position: absolute;color: black;  left: 0;top: 0;cursor: move;}
          </style>
      </head>
      <body>
      <div id="div1"></div>
      </body>
      </html>
      <script src=""></script>
      <script>
          var oDiv=document.getElementById("div1");
          oDiv.onmouseenter=function(event) {
              var newDiv=document.createElement("div");
              newDiv.id="newDiv";
              this.appendChild(newDiv);//this添加,而不是document.body;
              setMark(newDiv,event);
          };
          oDiv.onmousemove=function(event) {
              var newDiv=document.getElementById("newDiv");
              if(newDiv){
                  setMark(newDiv,event);
              }
      
          };
          oDiv.onmouseleave= function () {
              var newDiv=document.getElementById("newDiv");
                  newDiv.parentNode.removeChild(newDiv);
          };
      
      
          function setMark(newDiv, event) {
              event = event || window.event;
              //上面是绑定事件的标配;
              //获取这个div的宽度和高度;并且让这个DIV显示在鼠标出现位置的正中间;
              newDiv.style.left =event.clientX-newDiv.offsetWidth/2+"px";
              newDiv.style.top =event.clientY-newDiv.offsetHeight/2+"px";
              //下面是判断边界,当鼠标移到左边界和右边界的判断;
              var l= event.clientX-newDiv.offsetWidth/2-oDiv.offsetLeft;
              var t= event.clientY-newDiv.offsetHeight/2-oDiv.offsetTop;
              if (l <= 0) {
                  newDiv.style.left = oDiv.offsetLeft + "px";
              } else if (l > (oDiv.offsetWidth - newDiv.offsetWidth)) {
                  newDiv.style.left = oDiv.offsetLeft + oDiv.offsetWidth-newDiv.offsetWidth + "px";
              }
              //当鼠标移到上边界和下边界的判断;
              if (t < 0) {
                  newDiv.style.top = oDiv.offsetTop  + "px";
              } else if (t > (oDiv.offsetHeight - newDiv.offsetHeight)) {
                  newDiv.style.top = oDiv.offsetTop + oDiv.offsetHeight-newDiv.offsetHeight + "px";
              }
          };
      
      
      
      
      
      
      
      
      
      
      
      
      </script>
      

      3

      <!DOCTYPE html>
      <html>
      <head lang="en">
          <meta charset="UTF-8">
          <title></title>
          <style>
              body{margin: 0;padding: 0;}
              #div1{width: 300px;height: 300px;background: orange;margin: 100px 0 0 100px;}
              #newDiv{width: 100px;height: 100px;background: red;position: absolute;color: black;  left: 0;top: 0;cursor: move;}
          </style>
      </head>
      <body>
      <div id="div1"></div>
      </body>
      </html>
      <script src=""></script>
      <script>
          var oDiv=document.getElementById("div1");
          var oDivL=oDiv.offsetLeft;
          var oDivT=oDiv.offsetTop;
          var oDivH=oDiv.offsetHeight;
          var oDivW=oDiv.offsetWidth;
          oDiv.onmouseenter=function(event) {
              var newDiv=document.createElement("div");
              newDiv.id="newDiv";
              this.appendChild(newDiv);//this添加,而不是document.body;
              setMark(newDiv,event);
          };
          oDiv.onmousemove=function(event) {
              var newDiv=document.getElementById("newDiv");
              if(newDiv){
                  setMark(newDiv,event);
              }
          };
          oDiv.onmouseleave= function () {
              var newDiv=document.getElementById("newDiv");
                  newDiv.parentNode.removeChild(newDiv);
          };
      
          function setMark(newDiv, event) {
              event = event || window.event;
              var newW=newDiv.offsetWidth;
              var newH=newDiv.offsetHeight;
              newDiv.style.left =event.clientX-newW/2+"px";
              newDiv.style.top =event.clientY-newH/2+"px";
              //下面是判断边界,当鼠标移到左边界和右边界的判断;
              var l= event.clientX-newW/2-oDivL;
              var t= event.clientY-newH/2-oDivT;
              if (l <= 0) {
                  newDiv.style.left = oDivL + "px";
              } else if (l > (oDivW - newW)) {
                  newDiv.style.left = oDivL + oDivW -newW + "px";
              }
              //当鼠标移到上边界和下边界的判断;
              if (t < 0) {
                  newDiv.style.top = oDivT  + "px";
              } else if (t > (oDivH - newH)) {
                  newDiv.style.top = oDivT + oDivH-newH + "px";
              }
          };
      
      
      
      
      </script>
      
      目录
      本文目录
      目录