阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 电商网站的放大镜效果

      1

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="UTF-8">
          <title>电子商务网站放大镜效果</title>
          <style type="text/css">
              html, body, div {  margin: 0;  padding: 0;  }
              #tab {  position: relative;  width: 300px;  height: 300px;margin: 50px ;  background: #CDE074;  }
              #mark {  position: absolute;  top: 0;  left: 0;  width: 100px;  height: 100px;  background: #B00000;  opacity: 0.5;  filter: alpha(opacity=50);  cursor: move;  }
              #container{ position:absolute; height:360px; width:360px; background:pink; overflow:hidden;left: 350px;top: 0px}
              #bigImg{ position:absolute; display:block; border:none;}
          </style>
      </head>
      <body>
          <div id="tab">
              <img src="img/smallPeony.jpg" width="300" height="300" id="img1">
          </div>
      <div id="jiance"></div>
      </body>
      </html>
      <script type="text/javascript">
          var oTab = document.getElementById("tab");
          //获得oDiv本身的高和宽;获得oDiv距离浏览器左上角的位移;
          var tabT = oTab.offsetTop;
          var tabL = oTab.offsetLeft;
          var tabW = oTab.offsetWidth;
          var tabH = oTab.offsetHeight;
      
          //onmouseenter限制冒泡机制
          oTab.onmouseenter = function (e) {
              //创建大图容器
              var container = document.createElement("div");
              container.id = "container";
              this.appendChild(container);
      
              var bigImg=document.createElement("img");
              bigImg.src="img/peony.jpg";
              bigImg.id="bigImg";
              container.appendChild(bigImg);
      
              //当鼠标移近来的时候,动态创建一个DIV元素,id是mark
              var mark = document.createElement("div");
              mark.id = "mark";
              this.appendChild(mark);//像oTab里添加mark;
      
              //执行setMark
              setMark(mark, container, e);
          };
      
          oTab.onmousemove = function (e) {
              var mark = document.getElementById("mark");
              if (mark) {
                  //先判断mark是否存在,如果存在,执行setMark
                  setMark(mark, container, e);
              }
          };
      
          //onmouseleave也可以显示冒泡机制;
          oTab.onmouseleave = function () {
              var mark = document.getElementById("mark");
              if (mark) {
                  //当离开的时候移除mark节点;
                  this.removeChild(mark);
                  this.removeChild(container);
              }
          };
      
          var jiance=document.getElementById("jiance");
          function setMark(mark,container,e) {
              e = e || window.event;
              //上面是绑定事件的标配;
              //获取mark这个div的宽度和高度;并且让mark这个DIV显示在鼠标出现位置的正中间;
              var markW = mark.offsetWidth;
              var markH = mark.offsetHeight;
              var l = e.clientX - tabL - (markW / 2);
              var t = e.clientY - tabT - (markH / 2);
              mark.style.left = l + "px";
              mark.style.top = t + "px";
              container.style.left=tabW+10+"px";
              container.style.top=0;
              bigImg.style.left="-"+l/tabW*bigImg.width+"px";
              bigImg.style.top="-"+t/tabH*bigImg.height+"px";
      
      
              //下面是判断边界,当鼠标移到左边界和右边界的判断;
              if (l < 0) {
                  mark.style.left = 0;
              } else if (l > (tabW - markW)) {
                  mark.style.left = tabW - markW + "px";
                  bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px";
              }
              //当鼠标移到上边界和下边界的判断;
              if (t < 0) {
                  mark.style.top = 0 + "px";
              } else if (t > (tabH - markH)) {
                  mark.style.top = tabH - markH + "px";
                  bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px";
              }
          };
      </script>
      

      2

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="UTF-8">
          <title>电子商务网站放大镜效果</title>
          <style type="text/css">
              html, body, div {  margin: 0;  padding: 0;  }
              #tab {  position: relative;  width: 300px;  height: 300px;margin: 50px ;  background: #CDE074;  }
              #mark {  position: absolute;  top: 0;  left: 0;  width: 100px;  height: 100px;  background: #B00000;  opacity: 0.5;  filter: alpha(opacity=50);  cursor: move;  }
              #container{ position:absolute; height:360px; width:360px; background:pink; overflow:hidden;left: 350px;top: 0px}
              #bigImg{ position:absolute; display:block; border:none;}
          </style>
      </head>
      <body>
          <div id="tab">
              <img src="img/smallPeony.jpg" width="300" height="300" id="img1">
          </div>
      <div id="jiance"></div>
      </body>
      </html>
      <script type="text/javascript">
          //获得oDiv本身的高和宽;获得oDiv距离浏览器左上角的位移;
          var oDiv = document.getElementById("tab");
          var off = offset.call(oDiv);
          oDiv.onmouseenter = function (e) {
              //小图
              var mark = document.createElement("div");
              mark.id = "mark";
              this.appendChild(mark);
      
              //创建大图容器
              var container = document.createElement("div");
              container.id = "container";
              this.appendChild(container);
      
              var bigImg=document.createElement("img");
              bigImg.src="img/peony.jpg";
              bigImg.id="bigImg";
              container.appendChild(bigImg);
      
              setMark(mark, container, e);
          }
          oDiv.onmousemove = function (e) {
              var mark = document.getElementById("mark");
              if (mark) {
                  critical(this, mark, e);
              }
          }
          oDiv.onmouseleave = function (e) {
              var mark = document.getElementById("mark");
              if (mark) {
                  this.removeChild(mark);
              }
          }
      
          function critical(oDiv, mark, e) {
              e = e || window.event;
              var l = e.clientX - off.left - (mark.offsetWidth / 2);
              var t = e.clientY - off.top - (mark.offsetHeight / 2);
              mark.style.top = t + "px";
              mark.style.left = l + "px";
      
              if (l <= 0) {
                  mark.style.left = 0;
              } else if (l >= (oDiv.offsetWidth - mark.offsetWidth)) {
                  mark.style.left = oDiv.offsetWidth - mark.offsetWidth + "px";
              }
              if (t <= 0) {
                  mark.style.top = 0;
              } else if (t >= (oDiv.offsetHeight - mark.offsetHeight)) {
                  mark.style.top = oDiv.offsetHeight - mark.offsetHeight + "px";
              }
          }
      
          function setMark(mark,container,e) {
              e = e || window.event;
              //上面是绑定事件的标配;
              //获取mark这个div的宽度和高度;并且让mark这个DIV显示在鼠标出现位置的正中间;
              var markW = mark.offsetWidth;
              var markH = mark.offsetHeight;
              var l = e.clientX - tabL - (markW / 2);
              var t = e.clientY - tabT - (markH / 2);
              mark.style.left = l + "px";
              mark.style.top = t + "px";
              container.style.left=tabW+10+"px";
              container.style.top=0;
              bigImg.style.left="-"+l/tabW*bigImg.width+"px";
              bigImg.style.top="-"+t/tabH*bigImg.height+"px";
      
      
              //下面是判断边界,当鼠标移到左边界和右边界的判断;
              if (l-15 < 0) {
                  mark.style.left = 0;
              } else if (l > (tabW - markW)) {
                  mark.style.left = tabW - markW + "px";
                  bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px";
              }
              //当鼠标移到上边界和下边界的判断;
              if (t < 0) {
                  mark.style.top = 0 + "px";
              } else if (t > (tabH - markH)) {
                  mark.style.top = tabH - markH + "px";
                  bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px";
              }
          };
      
          function offset() {
              var left = this.offsetLeft, top = this.offsetTop, par = this.offsetParent;
              while (par) {
                  left += par.offsetLeft;
                  top += par.offsetTop;
                  if (window.navigator.userAgent.indexOf("MSIE 8.0") <= -1) {
                      left += par.clientLeft;
                      top += par.clientTop;
                  }
                  par = par.offsetParent;
              }
              return {
                  left: left,
                  top: top
              };
          }
      </script>
      

      3

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="UTF-8">
          <title>电子商务网站放大镜效果</title>
          <style type="text/css">
              html, body, div img{  margin: 0;  padding: 0;  }
              #tab {  position: relative;  width: 450px;  height: 450px;margin: 50px ;  background: #CDE074;  }
              #mark {  position: absolute;  top: 0;  left: 0;  width: 100px;  height: 100px;  background: #B00000;  opacity: 0.5;  filter: alpha(opacity=50);  cursor: move;  }
              #container{ position:absolute; height:450px; width:450px; background:pink; overflow:hidden;left: 350px;top: 0px}
              #bigImg{ position:absolute; display:block; border:none;}
          </style>
      </head>
      <body>
      <div id="tab">
          <img src="img/smallPeony.jpg" width="450" height="450" id="img1">
      </div>
      <div id="jiance"></div>
      </body>
      </html>
      <script type="text/javascript">
          var oTab = document.getElementById("tab");
          //获得oDiv本身的高和宽;获得oDiv距离浏览器左上角的位移;
          var tabT = oTab.offsetTop;
          var tabL = oTab.offsetLeft;
          var tabW = oTab.offsetWidth;
          var tabH = oTab.offsetHeight;
          //onmouseenter限制冒泡机制
          oTab.onmouseenter = function (e) {
              //创建大图容器
              var container = document.createElement("div");
              container.id = "container";
              this.appendChild(container);
      
              var bigImg=document.createElement("img");
              bigImg.src="img/peony.jpg";
              bigImg.id="bigImg";
              container.appendChild(bigImg);
      
              //当鼠标移近来的时候,动态创建一个DIV元素,id是mark
              var mark = document.createElement("div");
              mark.id = "mark";
              this.appendChild(mark);//像oTab里添加mark;
      
              //执行setMark
              setMark(mark, container, e);
          };
      
          oTab.onmousemove = function (e) {
              var mark = document.getElementById("mark");
              if (mark) {
                  //先判断mark是否存在,如果存在,执行setMark
                  setMark(mark, container, e);
              }
          };
      
          //onmouseleave也可以显示冒泡机制;
          oTab.onmouseleave = function () {
              var mark = document.getElementById("mark");
              if (mark) {
                  //当离开的时候移除mark节点;
                  this.removeChild(mark);
                  this.removeChild(container);
              }
          };
      
          var jiance=document.getElementById("jiance");
          function setMark(mark,container,e) {
              e = e || window.event;
              //上面是绑定事件的标配;
              //获取mark这个div的宽度和高度;并且让mark这个DIV显示在鼠标出现位置的正中间;
              var markW = mark.offsetWidth;
              var markH = mark.offsetHeight;
              var l = e.clientX - tabL - (mark.offsetWidth / 2);
              var t = e.clientY - tabT - (mark.offsetHeight / 2);
              mark.style.left = l + "px";
              mark.style.top = t + "px";
              container.style.left=tabW+10+"px";
              container.style.top=0;
      //        bigImg.style.left="-"+(l/tabW*bigImg.width)+"px";
      //        bigImg.style.top="-"+(t/tabH*bigImg.height)+"px";
              //如果样式用上面的写,在IE678的时候有兼容性问题,应该改为下面的
              if(l<=0){
                  bigImg.style.left=="0px";
              }else{
                  bigImg.style.left="-"+l/tabW*bigImg.width+"px";
              }
              if(t<=0){
                  bigImg.style.top=="0px";
              }else{
                  bigImg.style.top="-"+(t/tabH*bigImg.height)+"px";
              }
              console.log("====t::"+parseInt(t));
      
              //下面是判断边界,当鼠标移到左边界和右边界的判断;
              if (l < 0) {
                  mark.style.left = 0;
              } else if (l > (tabW - markW)) {
                  mark.style.left = tabW - markW + "px";
                  bigImg.style.left="-"+(tabW-markW)/tabW*bigImg.width+"px";
              }
              //当鼠标移到上边界和下边界的判断;
              if (t < 0) {
                  mark.style.top = 0 + "px";
              } else if (t > (tabH - markH)) {
                  mark.style.top = tabH - markH + "px";
                  bigImg.style.top="-"+(tabH-markH)/tabH*bigImg.height+"px";
              }
          };
      </script>
      
      目录
      本文目录
      目录