JS实现购物商城商品放大

img属于行内元素

效果

当放大图片时候,文字位置发生改变

文字出现在图片下方,因为图片有一个隐形的g线,这条线的位置和以前上学时候,用于专门写英语单词作业本上的线条最下方

解决这个问题只需要设置:display:block;就能把那空出来的位置给消除掉

也可以在图片里设置font-size:0;把文字大小为0,g线的位置就可以底线(图片)位置就可以对齐了

winodw:浏览器对象,操作浏览器相关属性和相关方法就用到window

document:就是一个API

<!DOCTYPE html>
<html>
<head>
    <title>图片放大</title>
    <meta charset="utf-8">

    <style>
        body{
            margin:0;
            padding:0;
        }
        ul{
            margin:0;
            padding:0;
            list-style:none;
        }
        #container{
            position:relative;
            width:400px;
            height:480px;
            border:1px #888 solid;
            margin:50px auto;
        }
        #container .pig{
            margin-bottom:15px;
        }
        #container .pig .caver{
            position:absolute;
            display:none;
            top:0;
            width:100px;
            height:100px;
            background-color:rgba(255,255,255,.2);
        }
        #container .pig img{
            display:block;
            width:400px;
            height:400px;
        }
        #container .list{
            display:flex;
        }
        #container .list li{
            margin:auto;
        }
        #container .list img{
            display: block;
            width:50px;
            height:50px;
        }
        #container .detell{
            position:absolute;
            display:none;
            top:0;
            left:400px;
            width:400px;
            height:400px;
            /*border:1px solid #888;*/
            background-image:url(images/mn1.jpg);
            background-size:400%;
        }
         #container .list .current{
            border:2px solid red;
        } 
    </style>
</head>
<body>
    <div id='container'>
        <div class='pig'>
            <img src="images/mn1.jpg">
            <div class='caver'></div>
        </div>
        <ul class='list'>
            <li>
                <img  class='current' src="images/mn1.jpg">
            </li>
            <li>
                <img src="images/mn.jpg">
            </li>
            <li>
                <img src="images/mn2.jpg">
            </li>
            <li>
                <img src="images/mn3.jpg">
            </li>
            <li>
                <img src="images/1.jpg">
            </li>
            <li>
                <img src="images/2.jpg">
            </li>
        </ul>
        <div class='detell'></div>
    </div>

    <script>
        var list = document.querySelector('.list'),
            imgs = list.querySelectorAll('img'),
            pig = document.querySelector('#container .pig'),
            caver = pig.querySelector('.caver'),
            detell = document.querySelector('#container .detell'),
            img = document.querySelector('.pig img');
        list.addEventListener('mousemove',function(e){
            if(e.target.tagName == 'IMG'){
                img.src = e.target.src;
                detell.style.backgroundImage = 'url('+e.target.src+')' ;
                imgs.forEach(function(item){
                    item.className = '';
                })
                e.target.className = 'current';
            }        
        })

        pig.addEventListener('mousemove',function(e){
            var x = e.clientX,/*基于pig盒子左边线到浏览器的距离(鼠标在pig盒子X坐标 = 鼠标到pig盒子左边线距离 + pig盒子左边线到浏览器的距离)*/
                y = e.clientY,/*基于pig盒子上边线到浏览器的距离(鼠标在pig盒子y坐标 = 鼠标到pig盒子上边线距离 + pig盒子上边线到浏览器的距离)*/
                xp = pig.getBoundingClientRect().left,//pig左边到浏览器的距离
                yp = pig.getBoundingClientRect().top,//pig顶部到浏览器的距离
                cx = x - xp - 50,
                cy = y - yp - 50;
                console.log(x,y);

            if(cx < 0 ){
                cx = 0;
            }
            if(cy < 0){
                cy = 0;
            }
            if(cx > 300){
                cx = 300;
            }
            if(cy > 300){
                cy = 300;
            }
            detell.style.backgroundPosition = cx/300*100+'%'+cy/300*100+'%';
            caver.style.left = cx + 'px';//caver盒子 = X轴-pig盒子左边距
            caver.style.top = cy + 'px';//caver盒子 = y轴-pig盒子上边距

            detell.style.display = 'block';
            caver.style.display = 'block';
        })
        pig.addEventListener('mouseout',function(e){
            var x = e.clientX,
                y = e.clientY,
                xp = pig.getBoundingClientRect().left,//pig左边到浏览器的距离
                yp = pig.getBoundingClientRect().top,//pig顶部到浏览器的距离
                rp = pig.getBoundingClientRect().right,
                tp = pig.getBoundingClientRect().bottom;
                if(x < xp || y < yp){//基于pig盒子左上角坐标进行判断
                    detell.style.display = 'none';
                    caver.style.display = 'none';
                }else if(x > rp || y >tp){//基于盒子右下角坐标进行判断
                    detell.style.display = 'none';
                    caver.style.display = 'none';
                }
        })
        /*
        getBoundingClientRect()
        e.clientX和e.clientY是基于浏览器边界的距离
         */
                
    </script>
</body>
</html>