JavaScript实现商品图片的细节放大随鼠标移动

梦里梦外; 2021-11-10 15:34 287阅读 0赞

### 一.效果展示 ###

--------------------

![在这里插入图片描述][20190803140617562.gif]

### 二.代码实现 ###

**1.html部分**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>商品细节放大</title>
            <link rel="stylesheet" type="text/css" href="css/index5.css"/>
            <script src="js/index5.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
            <div id="container">
                <div id="smallDiv">
                    <img src="img/small.jpg" />
                    <div id="zoomDiv"></div>
                    <div id="cover"></div>
                </div>
                <div id="bigDiv">
                    <img src="img/big.jpg" />
                </div>
            </div>
    	</body>
    </html>

**2.css部分：**

* { 
        padding: 0;
        margin: 0;
    }
    body{ 
        padding: 50px;
    }
    
    #container{ 
        width: 80%;
        margin: 0 auto;
        height: 800px;
        background-color:#FFFFFF;
    }
    #smallDiv{ 
        width: 310px;
        height: 310px;
        position: relative;
        
    }
    #smallDiv img{ 
        border: 1px solid gray;
    }
    #zoomDiv{ 
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: #000000;
        opacity: .2;
        cursor: move;
        left: 0;
        top: 0;
        display: none;
    }
    
    #cover{ 
        width: 100%;
        height: 100%;
        z-index: 10;
        position: absolute;
        left: 0;
        top: 0;
        cursor: move;
        opacity: 0;
    }
    #bigDiv{ 
        width: 310px;
        height: 310px;
        overflow: hidden;
        position: relative;
        display: none;
    }
    #bigDiv img{ 
        position: absolute;
        left: 0px;
        top: 0px;
    }

**3.js部分：**

var smallDiv = null;//存放小图的div
    var zoomDiv = null;//阴影遮罩div
    var zoomDivWidth = 0;
    var smallDivWidth = 0;
    var bigDiv = null;
    var bigDivWidth ;
    var bigDivImg = null;
    
    window.onload = function(){ 
        smallDiv = document.getElementById('smallDiv');
        zoomDiv = document.getElementById('zoomDiv');
        
        console.log([smallDiv])
        
        //阴影部分的宽度
        zoomDivWidth = zoomDiv.style.width?  zoomDiv.style.width 
            : document.defaultView.getComputedStyle(zoomDiv,null).width;
        zoomDivWidth = parseInt(zoomDivWidth)
       
        //小图div的宽度
        smallDivWidth = smallDiv.offsetWidth;
       
        bigDiv = document.getElementById('bigDiv')
        bigDivImg = document.getElementById('bigDiv').getElementsByTagName('img')[0];
        //放大容器的宽度
        bigDivWidth = bigDiv.style.width?  bigDiv.style.width 
           : document.defaultView.getComputedStyle(bigDiv,null).width;
       bigDivWidth = parseInt(bigDivWidth)
          
       
       
        smallDiv.onmouseover = function(event){ 
           showZoomDiv()
        }
        
        
        smallDiv.onmouseout = function(event){ 
            
            //消失阴影遮罩
            zoomDiv.style.display = 'none';
            
             //消失大图部分
            bigDiv.style.display = 'none';
        }
        
        smallDiv.onmousemove = function(event){ 
           showZoomDiv()
        }
    }
    
    function showZoomDiv(event){ 
        //获取鼠标的位置
        var evt = event ? event : window.event;
        var pointX = evt.layerX; //evt.pageX;
        var pointY = evt.layerY //evt.pageY;
        
        //鼠标放在阴影的中心
        pointX = pointX - zoomDivWidth/2
        pointY = pointY -  zoomDivWidth/2
        
        //确定左边的左边界的值
        //pointX如果小于 zoomDiv 宽度半 pointX = zoomDiv 宽度半
        if(pointX <= 0){ 
            pointX = 0;
        }
        if(pointY <= 0){ 
            pointY = 0;
        }
        //pointX 右边界 只要鼠标坐标大于smallDiv的宽度-zoomDiv 宽度半
        if(pointX >= (smallDivWidth - zoomDivWidth)){ 
            pointX = smallDivWidth -  zoomDivWidth;
        }
         if(pointY >= (smallDivWidth - zoomDivWidth)){ 
            pointY = smallDivWidth -  zoomDivWidth;
        }
        
        zoomDiv.style.top = pointY + 'px'
        zoomDiv.style.left = pointX + 'px'
        
        //显示阴影遮罩
        zoomDiv.style.display = 'block';
        
        
        //显示大图部分
        bigDiv.style.display = 'block';
        bigDiv.style.position = 'absolute'
        var top = smallDiv.offsetTop;
        var left = smallDiv.offsetLeft;
        bigDiv.style.left = left + smallDivWidth + 50 + 'px'
        bigDiv.style.top = top + 'px'
        
        //小图上的坐标点和大图大致对应
        //小图坐标点的位置 * (大图的实际尺寸/大图的容器的尺寸)
        var imgTop = -pointY * (bigDivImg.offsetHeight/bigDivWidth)
        var imgLeft = -pointX *(bigDivImg.offsetWidth/bigDivWidth)
        
        bigDivImg.style.top = imgTop + 'px';
        bigDivImg.style.left = imgLeft + 'px';
    }

[20190803140617562.gif]: /images/20211109/71b35cfb93ec48f8be3cea3be6b3a41f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标悬停放大图片特效

鼠标悬停放大图片 ![在这里插入图片描述][format_png_pic_center] 鼠标悬停放大图片是个比较吸引人的特效。废话我就不多说了，直接上结局办法。

不念不忘少年蓝@/ 2023年05月21日 07:07/ 0 赞/ 3 阅读

相关 js鼠标滚轮放大缩小图片

[下载地址][Link 1]JavaScript通过转动鼠标滚轮放大缩小图片 ![1631561166.png][] dd: [Link 1]: https://yy1

蔚落/ 2022年09月12日 01:43/ 0 赞/ 265 阅读

相关鼠标经过，图片会放大（从中心位置放大）

js部分： //鼠标经过a标签，对应的图片会放大效果 var zoom = 1.03; var width = $(thi

叁歲伎倆/ 2022年08月06日 12:13/ 0 赞/ 212 阅读

相关 jquery图片随鼠标移动放大(两种方式)

1. 示例 //鼠标移入 function divIn(event) { var img = event.

墨蓝/ 2022年06月04日 03:19/ 0 赞/ 690 阅读

相关商品图片放大镜的JavaScript实现

html代码 <div id="content"> <div id="box"> <img src="imgs/1-large

浅浅的花香味﹌/ 2022年05月27日 03:06/ 0 赞/ 277 阅读

相关实现鼠标经过,产品图片的局部放大功能

vue中实例：操作dom实现参考：https://blog.csdn.net/alightman/article/details/78074687 注意点： 1、小图、

た入场券/ 2022年05月23日 01:43/ 0 赞/ 305 阅读

相关 CSS实现鼠标移动到图片，更换图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xh

「爱情、让人受尽委屈。」/ 2022年03月09日 03:28/ 0 赞/ 291 阅读

相关 JavaScript实现商品图片的细节放大随鼠标移动

一.效果展示 -------------------- ![在这里插入图片描述][20190803140617562.gif] 二.代码实现 1.html部分

梦里梦外;/ 2021年11月10日 15:34/ 0 赞/ 288 阅读

相关 JavaScript实现商品图片随鼠标动态全图放大

一.实现效果展示： -------------------- ![在这里插入图片描述][20190801214350601.gif] 二.代码实现 ------

水深无声/ 2021年11月10日 00:44/ 0 赞/ 356 阅读

相关 JavaScript 原生js实现鼠标拖拽移动盒子图片

主要用到函数鼠标按下：onmousedown 鼠标移动：onmousemove 鼠标抬起：onmouseup ![效果图][waterma

野性酷女/ 2021年09月21日 14:08/ 0 赞/ 465 阅读