js--模拟电商实现商品放大镜特效

最新推荐文章于 2024-03-04 11:31:57 发布

等待戈多的莱昂纳多

最新推荐文章于 2024-03-04 11:31:57 发布

阅读量277

点赞数 1

分类专栏：前端基础。文章标签： js

本文链接：https://blog.csdn.net/weixin_44892520/article/details/98230360

版权

前端基础。专栏收录该内容

42 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/bigf.js"></script>
    <style>
        * {
            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;

           }
    </style>
</head>
<body>
<div class="b-par">
    <div class="b-middle">
        <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>
</body>
</html>

js代码：

/**
 * Created by Administrator on 2019/8/2 0002.
 */
//声明全局变量
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";

        // 大图实际宽高 800*800    和中图实际宽高 350*420   比例  宽  2.2857  高  1.9047
        //根据大块的实际宽和高  计算小块的宽高  ----
    }
}

//var oldEle = null;
//window.onload = function () {
//    //加载完成事件
//    var sblock = document.getElementsByClassName("s-block");
//    //默认第一个变色
//    sblock[0].style.borderColor = "#e40000";
//    oldEle = sblock[0];
//    for (var i = 0; i < sblock.length; i++) {
//        sblock[i].onmouseenter = function () {
//            oldEle.style.borderColor = "transparent";
//            this.style.borderColor = "#e40000";
//            oldEle = this;
//        }
//    }
//}