主页 / 网络编程 /

用js制作淘宝放大镜效果

网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要为大家详细介绍了js制作淘宝放大镜效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js制作淘宝放大镜效果的具体代码，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   {
    margin: 0;
    padding: 0;
   }
   img{
    width: 100%;
    height: 100%;
   }
   #content{
    width: auto;
    height: auto;
    margin-left: 200px;
    margin-: 60px;
   }
   #content-left{
    position: relative;
    width: 420px;
    height: auto;
    float: left;
   }
   #middle{
    border: 1px solid #d2d2d2;
    width: 418px;
    height: 418px;
   }
   #small{
    width: 420px;
    height: auto;
   }
   #glass{
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: pink;
    : 0;
    opacity: 0.5;
    z-index: 1;
    display: none;
   }
   ul{
    width: inherit;
    height: 60px;
   }
   ul li{
    display: inline;
    height: 60px;
    list-style: none;
    float: left;
    margin: 10px;
   }
   #content-right{
    position: relative;
    width: 418px;
    height: 418px;
    border: 1px solid #c;
    float: left;
    margin-left: 10px;
    overflow: hidden;
    display: none;
   }
   #content-right img{
    position: absolute;
    width: 836px;
    height: 836px;
   }
  </style>
 </head>
 <body>
  <div id="content">
   <div id="content-left">
    <div id="middle">
     <div id="glass"></div>
     <img src="img/01.jpg"/>
    </div>
    <div id="small">
     <ul>
      <li><img src="img/1.jpg"/></li>
      <li><img src="img/2.jpg"/></li>
      <li><img src="img/3.jpg"/></li>
      <li><img src="img/4.jpg"/></li>
      <li><img src="img/5.jpg"/></li>
     </ul>
    </div>
   </div>
   <div id="content-right">
    <img src="img/001.jpg"/>
   </div>
  </div>
 </body>
 <script type="text/javascript">
  var smallLi = document.getElementById("small").getElementsByTagName("ul")[0].getElementsByTagName("li");
  var middle = document.getElementById("middle")
  var middleImg = middle.getElementsByTagName("img")[0]
  var contentRight = document.getElementById("content-right");
  var bigImg = contentRight.getElementsByTagName("img")[0]
  var glass = document.getElementById("glass");
  //获取放大镜大小
  var bigImgWidth = getStyle(bigImg,"width");
  var bigImgHeight = getStyle(bigImg,"height");
  var contentRightWidth = getStyle(contentRight,"width");
  var contentRightHeight = getStyle(contentRight,"height");
  var middleWidth = getStyle(middle,"width");
  var middleHeight = getStyle(middle,"height");
  var glassWidth = contentRightWidth/bigImgWidthmiddleWidth;
  var glassHeight = contentRightHeight/bigImgHeightmiddleHeight;
  var middleBorder = getStyle(middle,"border")
  glass.style.width = glassWidth + "px";
  glass.style.height = glassHeight + "px";
  for(var i =0;i<smallLi.length;i++){
   (function(index){
    smallLi[i].onmouseover = function(){
     middleImg.src = "img/0"+index+".jpg";
     bigImg.src = "img/00"+index+".jpg"
    }
   })((i+1));
  }
  middle.onmouseover = function(){
   contentRight.style.display = "block"
   glass.style.display = "block"
   middle.onmousemove = function(ev){
    var evt = ev||event
    var x = evt.x - content.offsetLeft -glass.offsetWidth/2 + window.scrollX - middleBorder
    var y = evt.y - content.offsetTop - glass.offsetHeight/2 + window.scrollY - middleBorder
    if(x<=middleBorder){
     x = middleBorder;
    }
    if(x>=middle.offsetWidth-glass.offsetWidth-middleBorder){
     x = middle.offsetWidth - glass.offsetWidth -middleBorder;
    }
    if(y<=middleBorder){
     y = middleBorder;
    }
    if(y>=middle.offsetHeight-glass.offsetHeight-middleBorder){
     y = middle.offsetHeight - glass.offsetHeight - middleBorder;
    }
    glass.style.left = x + "px"
    glass.style. = y + "px"
    bigImg.style.left = -xmiddleWidth/glassWidth + middleBorder2 + "px"
    bigImg.style. = -ymiddleHeight/glassHeight + middleBorder2 + "px"
    console.log(x)
    console.log(xmiddleWidth/glassWidth)
   }
   middle.onmouseout = function(){
    contentRight.style.display = "none";
    glass.style.display = "none";
   }
  }
  function getStyle(obj,attr){//获取css属性
   return (obj.currentStyle)?parseInt(obj.currentStyle[attr]):parseInt(getComputedStyle(obj,false)[attr]);
  }
 </script>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：简单实现js悬浮导航效果 下一篇：js实现百度搜索提示框

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by