案例--电商放大镜--对事件的操作

实现效果

代码

js部分

//声明全局变量
var oldEle = null;
window.onload = function () {
    //加载完成事件
    var sblock = document.getElementsByClassName("s-block");
    var middlimg = document.getElementsByClassName("b-middle-img")[0];
    var btnleft = document.getElementsByClassName("btnleft")[0];
    var btnright = document.getElementsByClassName("btnright")[0];
    var bspar = document.getElementsByClassName("b-s-par")[0];
    var bmiddle = document.getElementsByClassName("b-middle")[0];
    var ceng = document.getElementsByClassName("ceng")[0];
    var bpar = document.getElementsByClassName("b-par")[0];
    var bigCeng = document.getElementsByClassName("bigCeng")[0];
    //将默认的元素赋值到oldEle
    oldEle = sblock[0];
    for (var i = 0; i < sblock.length; i++) {
        sblock[i].onmouseenter = function () {
            //记录之前把之前变色的清除
            oldEle.className = "s-block";
            this.className = "s-blockborder s-block";
            oldEle = this;//记录当前变色的

            //同步上面的中等图片变化
            middlimg.src = this.getAttribute("data-src");
            bigCeng.style.backgroundImage = "url(" + this.getAttribute("data-big") + ")";
        }
    }
    //左右点击事件
    btnleft.onclick = function () {
        bspar.style.marginLeft = "0px";
    }
    btnright.onclick = function () {
        bspar.style.marginLeft = -(456 - 310) + "px";
    }
    //上面中等图写事件
    bmiddle.onmouseenter = function () {
        ceng.style.display = "block";
        bigCeng.style.display = "block"
    }
    bmiddle.onmouseleave = function () {
        ceng.style.display = "none";
        bigCeng.style.display = "none"
    }
    bmiddle.onmousemove = function (e) {
        var x = e.pageX || e.clientX;
        var y = e.pageY || e.clientY;
        x = x - bpar.offsetLeft - parseFloat(ceng.style.width) / 2;
        y = y - bpar.offsetTop - parseFloat(ceng.style.height) / 2;
        //限制x,y
        var bigleft = (parseFloat(window.getComputedStyle(bmiddle).width) - parseFloat(ceng.style.width));
        var bigtop = (parseFloat(window.getComputedStyle(bmiddle).height) - parseFloat(ceng.style.height));
        x = x <= 0 ? 0 : x >= bigleft ? bigleft : x;
        y = y <= 0 ? 0 : y >= bigtop ? bigtop : y;
        ceng.style.left = x + "px";
        ceng.style.top = y + "px";

        //鼠标移动大图跟着移动  计算移动比例
        bigCeng.style.backgroundPosition = (-x * 2.2857) + "px " + (-y * 1.9047) + "px";

html部分

<div class="b-par">
    <div class="b-mid

dle">
        <div class="ceng" style="width: 196.876px;height: 262.50px;"></div>
        <img class="b-middle-img" src=

"./img/middle8.jpg" alt=""/>
    </div>
    <div class="bigCeng">

    </div>
    <div class="b-small">
        <span class="btnleft"><</span>
        <div class="b-small-middle">
            <div class="b-s-par">
                <div class="s-block s-blockborder"  data-big="./img/big8.jpg" data-src="./img/middle8.jpg"><img src="./img/small8.jpg" alt=""/></div>
                <div class="s-block" data-big="./img/big5.jpg" data-src="./img/middle5.jpg"><img src="./img/small5.jpg" alt=""/></div>
                <div class="s-block" data-big="./img/big6.jpg" data-src="./img/middle6.jpg"><img src="./img/small6.jpg" alt=""/></div>
                <div class="s-block" data-big="./img/big7.jpg" data-src="./img/middle7.jpg"><img src="./img/small7.jpg" alt=""/></div>
                <div class="s-block" data-big="./img/big1.jpg" data-src="./img/middle1.jpg"><img src="./img/small1.jpg" alt=""/></div>
                <div class="s-block" data-big="./img/big2.jpg" data-src="./img/middle2.jpg"><img src="./img/small2.jpg" alt=""/></div>
                <div class="s-block" data-big="./img/big3.jpg" data-src="./img/middle3.jpg"><img src="./img/small3.jpg" alt=""/></div>
                <div class="s-block" data-big="./img/big4.jpg" data-src="./img/middle4.jpg"><img src="./img/small4.jpg" alt=""/></div>
            </div>
        </div>
        <span class="btnright">></span>
    </div>
</div>

css部分

* {
    margin: 0;
    padding: 0;
}

img {
    border: 0;
    vertical-align: middle;
}

.b-par {
    position: relative;
    width: 350px;
    height: 500px;
    margin: auto;
}

.b-middle {
    position: relative;
    width: 350px;
    height: 420px;
    border: 1px solid silver;
    cursor: move;
}

.b-middle-img {
    width: 100%;
    height: 100%;
}

.b-small {
    position: relative;
    width: 350px;
    height: 80px;
    font-size: 0;
}

.b-small div.s-block {
    width: 54px;
    height: auto;
    display: inline-block;
    margin: 0 3px 0 0;
    box-sizing: border-box;
    border: 3px solid transparent;
}

.b-small div.s-block img {
    width: 100%;
    height: 100%;
}

.b-s-par {
    width: 456px;
    margin: 12px 0;
    transition: margin-left .5s linear;
}

.b-small-middle {
    width: 310px;
    height: auto;
    overflow: hidden;
    margin: 0 20px;
}
.b-small>span{
    position: absolute;
    width: 20px;
    height: 80px;
    display: block;
    z-index:999;
    color: silver;
    text-align: center;
    line-height:80px;
    font-size: 20px;
    cursor: pointer;
}
.b-small>span:hover{
    background-color: silver;
    color: #fff;
}
.b-small>span:nth-child(1){
    left: 0;
    top: 0;
}
.b-small>span:nth-child(3){
    right: 0;
    top: 0;
}
.s-blockborder{
    border-color: #e40000 !important;
}
.ceng{
    display: none;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    background: url("./img/bg.png");
    background-size: 4px 4px;
}
.bigCeng{
    position: absolute;
    display: none;
    left: 351px;
    top: 0;
    width: 450px;
    height: 500px;
    border: 1px solid silver;
    background: url("./img/big8.jpg") no-repeat;

}

//如果图片不能将高全部填充，下底留缝，则将图片的样式加

vertial-align:middle;//垂直居中

//把块级元素转化为行级块的时候，会默认留5px的间距，这个时候给父级元素中设置font-size:0;即可解决