鼠标放上去，出现大图预览效果

最新推荐文章于 2021-03-10 15:17:18 发布

乐橙Web

最新推荐文章于 2021-03-10 15:17:18 发布

阅读量8.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：工作网页特效日常积累文章标签：鼠标放上图片放大特效 WEB前端 javascript

本文链接：https://blog.youkuaiyun.com/Mr_YanYan/article/details/65447042

工作网页特效日常积累专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了一种模仿淘宝商品图片放大镜效果的实现过程，包括页面布局、鼠标交互及预览图展示等关键技术点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前天逛淘宝，看见淘宝的商品图片，鼠标放上去就会就会有相应大图的预览，于是就想着自己能不能做一个这样的效果出来，毕竟以前也看过这样类似的教程。

思路：

一：页面布局

二：鼠标放上去，出现透明浮动块

三：鼠标在目标元素上移动时，出现预览图。

四：鼠标离开目标元素时，浮动块和大图预览消失。

下面咱们一步一步来解决

First:布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #div_1{
        width:110px;
        height:124px;
        position:relative;
    }
    .div_1_small{
       position:relative;
       outline-offset:2px;
       outline: 1px solid black; 
    }
    .img_small{
        width:110px;
    }
    .mark{
           width:100%;
        height:100%;
        position:absolute;
        opacity:0;
    }
    .float_layer{
        width:20px;
        height:20px;
        left:0px;
        top:0px;
        border:1px solid black;
        background-color:rgba(255, 255, 255, 0.3);
        position:absolute;
        display:none;
    }
   .div_1_big{
       width:150px;
       height:170px;
       left:115px;
       top:2px;
       background:red;
       overflow:hidden;
       position:absolute;
       display: none;
   }
   .div_1_big img{
      position:absolute;
      width:350px; 
   }

   
</style>
<body>
    <div id="div_1">
        <div class="div_1_small">//小图
            <span class="float_layer"></span>//浮动块
            <span class="mark"></span>//模拟目标元素
            <img src="images/1.jpg" class='img_small' alt="small">
        </div>
        <div class="div_1_big">//大图
            <img src="images/1.jpg" class="img_big"    alt="normal">
        </div>
    </div>
</body>
<script src='js/magnifyingGlass.js'></script>
</html>

Second 浮动块

鼠标放上去出现浮动块，首先想到的就是onmouseover,。事件动作由原来的CSS属性display='none'变为display = 'block';

Third移动和预览图

移动

浮动块要随鼠标移动，那么首先浮动块得是绝对定位，然后随着鼠标的移动，浮动块的top值和left值会改变，并将鼠标定位到浮动块的中间位置，有如下代码

        event.clientX - div.offsetLeft - small_img.offsetLeft - float_layer .offsetWidth/2+'px'

    //鼠标坐标位置减去所有小图的右边offsetLeft值，再减去浮动块的宽度的二分之一，这样鼠标就会出现浮动块的中间，高度同理

       event.clientY - div.offsetTop - small_img.offsetTop - float_layer.offsetHeight/2 +'px'

大图预览

①大图CSS属性变为display = 'block',position=‘absolute’。

②计算大图的显示比例，计算出比率=浮动块位置/（模拟块宽度 - 浮动块宽度）；然后用比率*（大图的宽度 - 可视区的宽度）【不见去可视区的宽度的话会出现浮动块移到最右边时，可视区出现白块的问题】

Fourth 效果消失

用到onmouseout,浮动快和大图的display = 'none';

下面贴出JS的代码

//获取类元素数组
function getByClass(oMark,sClass){
  var  sTagName = oMark.getElementsByTagName('*');
  var arr = [];
  for(var i = 0;i < sTagName.length;i++){
      if(sClass==sTagName[i].className){
         arr.push(sTagName[i]);
      }
  }
   return arr;
} 
//事件处理程序
var EventUtil = {
    addHandler:function(element,type,handler){
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }
        else if(element.attachEvent){
            element.attachEvent('on'+type,handler);
        }
        else{
            element['on'+type] = handler;
        }
    }
}

window.onload = function(){
   var div_1 = document.getElementById('div_1');
       oFloat_layer = getByClass(div_1,'float_layer')[0],
       oDiv_1_small = getByClass(div_1,'div_1_small')[0],
       oDiv_1_big = getByClass(div_1,'div_1_big')[0],
       oMark = getByClass(div_1,'mark')[0];
       oImg_big = getByClass(div_1,'img_big')[0];
    //获取各个元素引用
    
    function mouseOver(){
      oFloat_layer.style.display = 'block';
      oDiv_1_big.style.display = 'block'
    }
    function mouseOut(){
      oFloat_layer.style.display = 'none';
      oDiv_1_big.style.display = 'none' ;
    }
    function mouseMove(ev){
      var oEv = ev||event;
      var l = oEv.clientX - div_1.offsetLeft - oDiv_1_small.offsetLeft - oFloat_layer.offsetWidth/2;
      var t = oEv.clientY - div_1.offsetTop - oDiv_1_small.offsetTop - oFloat_layer.offsetHeight/2;
      //l t 一是让鼠标能始终在浮动小框的中间；二初步定位小浮动框的位置      
      if(l<0)
      {
          l = 0;
      }
      else if(l>oMark.offsetWidth-oFloat_layer.offsetWidth){
          l = oMark.offsetWidth-oFloat_layer.offsetWidth;
      }
      if(t<0){
          t = 0;
      }
      else if(t > oMark.offsetHeight - oFloat_layer.offsetHeight){
          t =  oMark.offsetHeight - oFloat_layer.offsetHeight;
      }
     
     oFloat_layer.style.left = l + 'px';
     oFloat_layer.style.top = t + 'px';
     //以下是算出来大图片的移动的位置
     var percentX = l/(oMark.offsetWidth-oFloat_layer.offsetWidth);
     var percentY = t/(oMark.offsetHeight-oFloat_layer.offsetHeight);

     oImg_big.style.left = -percentX*(oImg_big.offsetWidth - oDiv_1_big.offsetWidth) + 'px';
     oImg_big.style.top = -percentY*(oImg_big.offsetHeight - oDiv_1_big.offsetHeight) + 'px';
    }
    
    EventUtil.addHandler(oMark,'mouseover',mouseOver);
    EventUtil.addHandler(oMark,'mouseout',mouseOut);
    EventUtil.addHandler(oMark,'mousemove',mouseMove);    
}

这样就能出现想要的效果了。

如有该文有不对和不合理的地方，欢迎指正出来，大家一同交流，共同进步，谢谢大家的阅读。