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

最新推荐文章于 2022-05-18 17:11:14 发布

乐橙Web

最新推荐文章于 2022-05-18 17:11:14 发布

阅读量8.3k

点赞数

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

本文链接：https://blog.csdn.net/Mr_YanYan/article/details/65447042

版权

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

11 篇文章 0 订阅

订阅专栏

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

思路：

一：页面布局

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

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

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

下面咱们一步一步来解决

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);    
}
    这样就能出现想要的效果了。

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

乐橙Web

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
鼠标放上去，出现大图预览效果

前天逛淘宝，看见淘宝的商品图片，鼠标放上去就会就会有相应大图的预览，于是就想着自己能不能做一个这样的效果出来，毕竟以前也看过这样类似的教程。思路：一：页面布局二：鼠标放上去，出现透明浮动块三：鼠标在目标元素上移动时，出现预览图。四：鼠标离开目标元素时，浮动块和大图预览消失。
复制链接

扫一扫

专栏目录