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

最新推荐文章于 2023-10-31 13:45:02 发布

_Yoke

最新推荐文章于 2023-10-31 13:45:02 发布

阅读量620

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_40896997/article/details/98333801

版权

JavaScript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

一.效果展示

在这里插入图片描述

二.代码实现

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';
}

_Yoke

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
JavaScript实现商品图片的细节放大随鼠标移动

一.效果展示二.代码实现1.html部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>商品细节放大</title> <link rel="stylesheet" type="text/css" href="css...
复制链接

扫一扫

专栏目录