15.案例：京东放大镜 鼠标事件mouseover鼠标移到某个元素上触发；；；mouseout鼠标移出某个元素触发；；；mousemove鼠标在某个元素上移动时触发

html：

 <div class="xq_goodll">
                <div class="xq_goodlltop">
                    <!-- 遮罩层，（遮1），宽高300 -->
                    <div class="jjj"></div>
                    <!-- 宽高400 -->
                    <img src="upload/s3.png" class="fdj" alt="">
                    <!-- 图片框,宽高500 -->
                    <!-- 大图片宽高800 -->
                    <div class="big"><img src="upload/big.jpg" alt="" class="bigImg"></div>
                </div>
                <div class="xq_goodllbot">
                    <ul>
                        <li></li>
                        <li><img src="upload/pre.jpg" alt=""></li>
                        <li><img src="upload/pre.jpg" alt="" class="li_red"></li>
                        <li><img src="upload/pre.jpg" alt=""></li>
                        <li><img src="upload/pre.jpg" alt=""></li>
                        <li><img src="upload/pre.jpg" alt=""></li>
                        <li></li>
                    </ul>

                </div>
            </div>

css：

.xq_good .xq_goodlltop{
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #ccc;
}
.xq_goodlltop .jjj{
    width: 300px;
    height: 300px;
    position: absolute;
    background-color: #FEDE4F;
    opacity: .5;
    cursor:move;
    display: none;
}
.xq_goodlltop .big{
    position: absolute;
    width: 500px;
    height: 500px;
    top: -1px;
    left:410px;
    z-index:999;
    display: none;
    overflow: hidden;
    border: #ccc 1px solid;
}
.xq_goodlltop .bigImg {
    position: absolute;
}

js：

let xq_goodlltop = document.querySelector('.xq_goodlltop')

/*  放大镜开始*/
let fdj = document.querySelector('.fdj')
let jjj = document.getElementsByClassName('jjj')[0];

let big = document.querySelector('.big')
xq_goodlltop.addEventListener('mouseover', function () {
    big.style.display = 'block';
    jjj.style.display = 'block';
})
xq_goodlltop.addEventListener('mouseout', function () {
    big.style.display = 'none';
    jjj.style.display = 'none';
})
xq_goodlltop.addEventListener('mousemove', function (event) {

    let x = event.pageX - this.offsetLeft;
    let y = event.pageY - this.offsetTop;
    /* 减去盒子高度的一半 -150 */
    /* 把 jjj的距离父亲的偏移量提取出来  */
    let jjjLeft = x - jjj.offsetWidth / 2;
    let jjjTop = y - jjj.offsetHeight / 2;

    /* jjj可偏移的最大 left 和 top */
    let MaxLeft = xq_goodlltop.offsetWidth - jjj.offsetWidth
    let MaxTop = xq_goodlltop.offsetHeight - jjj.offsetHeight
    //如果jjjLeft <0 ;就让他停在0的位置
    if (jjjLeft <= 0) {
        jjjLeft = 0;
    } else if (jjjLeft >= MaxLeft) {
        jjjLeft = MaxLeft
    }
    // 如果jjjTop<0；让他停在0的位置
    if (jjjTop <= 0) {
        jjjTop = 0;
    } else if (jjjTop >= MaxTop) {
        jjjTop = MaxTop
    }


    jjj.style.left = jjjLeft + 'px'
    jjj.style.top = jjjTop + 'px';

    let bigImg = document.querySelector('.bigImg')
    /* 图二可移动最大 注意不要减反*/
    let bigImgMax = bigImg.offsetWidth - big.offsetWidth;
    /* bigImg移动距离=如下 */
    //大图移动距离 = 遮1左偏移量 * 大图可移动最大 / 遮1可移动最大

    /* 遮1左偏移量： jjjLeft*/
    /* 大图可移动最大：bigImgMax*/
    /* 遮1可移动最大: MaxLeft*/
    let bigImgLeft = jjjLeft * bigImgMax / MaxLeft
    let bigImgTop = jjjTop * bigImgMax / MaxTop
    bigImg.style.left = - bigImgLeft + 'px'
    bigImg.style.top = - bigImgTop + 'px'
    /* 加负号是因为加了相对定位，应向负移动 */
})


/* 放大镜结束 */




/* 右侧商品介绍栏切换 */
let flooerrr1 = document.getElementsByClassName('flooer_rr1')[0]
let flooertab = flooerrr1.getElementsByTagName('li')
let flooertab2 = document.getElementsByClassName('flooer_rrtab')
for (let i = 0; i < flooertab.length; i++) {
    flooertab[i].onclick = function () {
        /*1.上方tab栏切换 */
        for (let j = 0; j < flooertab.length; j++) {
            flooertab[j].classList.remove('rrnav_red')
        }
        this.classList.add('rrnav_red')
        /*2.下方介绍栏切换 */
        for (let q = 0; q < flooertab2.length; q++) {
            flooertab2[q].style.display = 'none'
        }
        flooertab2[i].style.display = 'block'
    }
}
/* 左侧tab切换 */
let flooer_lltop = document.getElementsByClassName('flooer_lltop')[0]
let flooerll_li = flooer_lltop.getElementsByTagName('li')
let flooer_llbot = document.getElementsByClassName('flooer_llbot')
for (let i = 0; i < flooerll_li.length; i++) {
    flooerll_li[i].addEventListener('click', function () {
        for (let j = 0; j < flooerll_li.length; j++) {
            flooerll_li[j].classList.remove('rrnav_red')
            //设置其他的为none
            for (let g = 0; g < flooer_llbot.length; g++) {
                flooer_llbot[g].style.display = 'none'
            }
        }
        flooerll_li[i].classList.add('rrnav_red')
        flooer_llbot[i].style.display = 'block'
    })
}