仿京东放大镜

最新推荐文章于 2025-12-28 21:12:06 发布

原创最新推荐文章于 2025-12-28 21:12:06 发布 · 131 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #javascript #css

本文介绍如何使用HTML和CSS创建一个网页，通过JavaScript实现鼠标悬停时显示放大区域，并允许用户调整图片大小。通过CSS和JS交互，实现了一个简单的图片缩放功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="left_con">
          <img class="left_img" src="./img1/p5.jpg" alt="">
          <div class="enlarge">

          </div>
          <div class="right"> 
            <img class="ri_img" src="./img1/p5.jpg" alt="">
          </div>
  </div>
</body>
</html>
<style>
  .ri_img{
    width: 500px;
    height: 500px;

  }
  .left_con{
    width: 396px;
    height: 396px;
    /* background-color: blue; */
    border: 2px solid rgb(4, 23, 105);
    position: relative;
  }
  .left_img{
    width: 270px;
    height: 270px;
    margin: 50px 0 0 50px;
  }
  .enlarge{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fede4f;
    opacity: .5;
    cursor: row-resize;
    display: none;
  }
  .right{
    width: 400px;
    height: 400px;
    background-color: pink;
    position: absolute;
    top: 0;
    left: 420px;
    display: none;
  }
</style>
<script>
  var left_con = document.querySelector('.left_con')   //左侧最大的盒子
      var enlarge = document.querySelector('.enlarge')    //黄色放大框
      var right = document.querySelector('.right')   //右边方框
      enlarge.addEventListener('mouseover',function(){
        right.style.display = 'block'
      })
      enlarge.addEventListener('mouseleave',function(){
        right.style.display = 'none'
      })

      left_con.addEventListener('mousemove',function(e){
        enlarge.style.display = 'block'
      })
      left_con.addEventListener('mouseleave',function(e){
        enlarge.style.display = 'none'
      })
      left_con.addEventListener('mousemove',function(e){
          x = e.pageX - left_con.offsetLeft
          y = e.pageY - left_con.offsetTop
          enlarge.style.left = x -100 + 'px'
          enlarge.style.top = y -100 +  'px'

          var enlargeX = x - enlarge.offsetWidth / 2
          var enlargeY = y - enlarge.offsetHeight /2
          if(enlargeX <= 0){
            enlargeX = 0
          }else if(enlargeX >= left_con.offsetWidth - enlarge.offsetWidth ){
            enlargeX = left_con.offsetWidth - enlarge.offsetWidth
          }
         
          if(enlargeY <= 0){
            enlargeY= 0
          }else if(enlargeY >= left_con.offsetHeight - enlarge.offsetHeight){
            enlargeY = left_con.offsetHeight - enlarge.offsetHeight
          }
          console.log(enlargeY + 'enlargeY');
          console.log(left_con.offsetHeight + '最大盒子的宽度');
          console.log(enlarge.offsetHeight + '黄色图的宽度');
          enlarge.style.left = enlargeX + 'px'
          enlarge.style.top = enlargeY + 'px'
      })
</script>