【demo】虫眼镜的制作 制作 完了 finish

参考资料

margin auto

overflow:hidden

20200422 着手日 ~ 

20200423  进度率 也就百分之十

20200428 完了

元素结构

<div id="mainDiv">
    
        <!-- 列表上面显示的那个中型号得到大图 -->
        <div class="middle">
            <span class="floatSpan"></span>
            <img src="images/m1.jpg" id="imgNode"/>

        </div>

        <!-- 放大镜放大时候的那个div -->
        <div class="big">

        </div>
        
        <!-- 左箭头 -->
        <span id="left"></span>
        <!-- 右箭头 -->
        <span id="right"></span>

        <!-- 下面红框的那个列表LIST -->
        <!-- List 中的是最小号的衣服图片 -->
        <!-- 带active的是当前选中的，是有红框的 -->
        <div id="list">
            <ul>
                <li class="active"><img src="images/s1.jpg" /></li>
                <li><img src="images/s2.jpg" /></li>
                <li><img src="images/s3.jpg" /></li>
                <li><img src="images/s4.jpg" /></li>
                <li><img src="images/s5.jpg" /></li>
                <li><img src="images/s6.jpg" /></li>
                <li><img src="images/s7.jpg" /></li>
                <li><img src="images/s8.jpg" /></li>
        	    <li><img src="images/s9.jpg" /></li>
                <li><img src="images/s10.jpg" /></li>
            </ul>
        </div>
    </div>

 

元素样式

<style type="text/css">

        /* 初始化全部元素 */
        *{
            margin: 0;
            padding: 0;
        }
    
        /* 最外层的div */
        /* 相对定位，且左右居中 */
        /* height，background-color这两是为了看一眼确实左右居中，调试用的 */
        #mainDiv{
            width:312px;
            /* height: 10px; */
            margin: 50px auto;
            position: relative;
            /* background-color: chocolate; */
        }

        /* 展示 列表里面被选召的孩子 那个大框 */
        /* 绝对定位 贴在父级的div上 */
        /* overflow:hidden 溢出来 溢出框的部分 选择 */
        .middle{
            width: 310px;
            height: 310px;
            border: 1px solid #cdcdcd;
            left: 0;
            top: 0;
            position: absolute;
            overflow:hidden;
        }

        /* 大框里面的图片属性 */
        #imgNode{
            width: 310px;
            height: 310px;
        }

        /* 虫眼镜 那个能移动的的小框 */
        /* TODO 为什么是span呢 */
        .floatSpan{
            width: 100px;
            height: 100px;
            position: absolute;
            background:#fede4f; 
            border:1px solid #aaa;
            /* 好像没用 */
            /* filter:alpha(opacity:50); */
            /* 透明度 */
            opacity:0.5;
            /* 浮在上层 */
            z-index:2;
            /* 鼠标编程十字移动型的 */
            cursor:move;
            display:none;
        }

        /* 外面那个虫眼镜放大div得到属性 */
        /* 绝对定位是相当于父类div(#mainDiv)的相对定位 */
        .big{

            width: 310px;
            height: 310px;
            border: 1px solid #cdcdcd;
            overflow: hidden;
            position:absolute;
            left: 320px;
            top: 0;
            display: none;
        }

        .big img{
            position:absolute;
            left: 0px;
            top: 0px;
        }

        /* 下面list开发部 */
        #list{
            width: 288px;
            height: 46px;
            overflow: hidden;
            position:absolute;
            left: 10px;
            top: 320px;
        }

        #list ul{

            position: absolute;
            left: opx;
        }

        #list li{
            list-style: none;
            /* 浮动以后 小图片可以横过来了 */
            float: left;
            padding: 4px;
            overflow: hidden;
            width: 40px;
            height: 40px;
        }

        #list li img{
            border: 1px solid #cdcdcd;
        }

        #list li.active img{
            border: 1px solid red;
        }

        /* 左按钮 */
        #left{
            width: 10px;
            height: 45px;
            /* 变块级元素了 */
            display: block;
            background: url(images/left.gif) no-repeat;
            position:absolute;
            top: 322px;
            left: 0px;
            cursor: pointer;
        }

        /* 右按钮 */
        #right{
            width: 10px;
            height: 45px;
            /* 变块级元素了 */
            display: block;
            background: url(images/right.gif) no-repeat;
            position:absolute;
            top: 322px;
            left: 300px;
            cursor: pointer;
        }

    </style>

1、list里面的小图片、选中哪个圈上框 

    <script type="text/javascript">
       
        // 1、list里面的小图片、选中哪个圈上框
        // 选中最大的list
        let imgSmallList = document.getElementById("list");
        // 根据list选中第一个孩子ul (imgSmallList.children)
        // 根据imgSmallList.children 选中ul 下面的 li
        // 不知道怎么选 就 打印出来 扒拉扒拉 找找 哪个是自己需要的元素
        let imgSmalls = imgSmallList.children[0].children;
        // console.log(imgSmallList);
        // console.log(imgSmalls[0].children);

        // 给middle那个div里的img
        let imgNode = document.getElementById("imgNode");

        // 给每一个li都帮点选中的点击事件
        // 不是点击事件，是鼠标移过去事件
        for(let i = 0;i<imgSmalls.length;i++){

            // 箭头函数的话 ， 里面那个this是 window 对象啊
            // imgSmalls[i].onmouseover = ()=>{

            //     console.log(this);
            // };
            
            // 而普通的这种 function 的函数里面的this 是该绑定的对象自己本身
            imgSmalls[i].onmouseover = function(){

                // console.log(this);

                // 清除 掉 所有的 active
                for(let j=0;j<imgSmalls.length;j++){

                    imgSmalls[j].className = "";
                }

                // 设置该 active
                this.className = "active";

                // 2、给middle那个地方的 换上相对应的 大图
                // console.log(this.children[0].src);
                // imgNode.src = this.children[0].src.replace("s","m");
                let lastIndex = this.children[0].src.lastIndexOf("s");
                // this.children[0].src.lastIndexOf("s")
                let strTemp = this.children[0].src.substr(0,lastIndex);
                let strNew = strTemp + 'm' + this.children[0].src.substr(lastIndex+1);
                // console.log(strNew);
                imgNode.src = strNew;

                // 3、给big那个地方的 换上相对应的图
                let strNewB = strTemp + 'b' + this.children[0].src.substr(lastIndex+1);
                // console.log(strNew);
                big.children[0].src = strNewB;
            };
        }

        // 左键点击
        let leftBtn = document.getElementById("left");
        leftBtn.onclick = function(){

            // 清除 掉 所有的 active
            for(let j=0;j<imgSmalls.length;j++){

                imgSmalls[j].className = "";
            }
            
            // 整个list向左方向移动五个
            for(let j=0;j<imgSmalls.length;j++){

                // imgSmalls[j].className = "";
                let src = imgSmalls[j].children[0].src;
                let lastIndex = src.lastIndexOf("s");
                let index = imgSmalls[j].children[0].src.substr(lastIndex + 1).replace(".jpg","");
                let indexNew = parseInt(index) + 6;
                if(indexNew > 10){
                    indexNew -= 10;
                }
                imgSmalls[j].children[0].src = imgSmalls[j].children[0].src.substr(0,lastIndex+1) + indexNew + ".jpg";
                if(j== 0){
                    imgSmalls[j].className = "active";
                    // 2、给middle那个地方的 换上相对应的 大图
                    // imgNode.src = this.children[0].src.replace("s","m");
                    let lastIndex = imgSmalls[j].children[0].src.lastIndexOf("s");
                    // this.children[0].src.lastIndexOf("s")
                    let strTemp = imgSmalls[j].children[0].src.substr(0,lastIndex);
                    let strNew = strTemp + 'm' + imgSmalls[j].children[0].src.substr(lastIndex+1);
                    // console.log(strNew);
                    imgNode.src = strNew;
                }
            }
        }


        // 右键点击
        let rightBtn = document.getElementById("right");
        rightBtn.onclick = ()=>{

            // 清除 掉 所有的 active
            for(let j=0;j<imgSmalls.length;j++){

                imgSmalls[j].className = "";
            }

            // 整个list向左方向移动五个
            for(let j=0;j<imgSmalls.length;j++){

                // imgSmalls[j].className = "";
                let src = imgSmalls[j].children[0].src;
                let lastIndex = src.lastIndexOf("s");
                let index = imgSmalls[j].children[0].src.substr(lastIndex + 1).replace(".jpg","");
                let indexNew = parseInt(index) - 6;
                if(indexNew < 1){
                    indexNew += 10;
                }
                imgSmalls[j].children[0].src = imgSmalls[j].children[0].src.substr(0,lastIndex+1) + indexNew + ".jpg";
                if(j== 0){
                    imgSmalls[j].className = "active";
                    // 2、给middle那个地方的 换上相对应的 大图
                    // imgNode.src = this.children[0].src.replace("s","m");
                    let lastIndex = imgSmalls[j].children[0].src.lastIndexOf("s");
                    // this.children[0].src.lastIndexOf("s")
                    let strTemp = imgSmalls[j].children[0].src.substr(0,lastIndex);
                    let strNew = strTemp + 'm' + imgSmalls[j].children[0].src.substr(lastIndex+1);
                    // console.log(strNew);
                    imgNode.src = strNew;
                }
            }
        }

        // 放大镜效果（虫眼镜效果）
        // 鼠标移入到middle画面的时候，
        middleId.onmouseover = ()=>{

            // 内部小黄框表示
            floatSpanId.style.display = "block";

            // 右侧div表示
            big.style.display = "block";
            // 添加一个图片元素


        }

        middleId.onmouseout = ()=>{

            // 内部小黄框非表示
            floatSpanId.style.display = "none";

            // 右侧div非表示
            big.style.display = "none";
        }

        // 
        middleId.onmousemove = function(e){

            ev = e || event;
            // console.log("middleId.onmousemove===" + ev.clientX);

            // floatSpanId.style.left =  ev.clientX- mainDiv.offsetLeft -(floatSpanId.offsetWidth/2) + "px"; 
            // floatSpanId.style.top =  ev.clientY- mainDiv.offsetTop - (floatSpanId.offsetHeight/2) + "px"; 

            // 实时的小黄框的坐标位置
            let moveX = ev.clientX- mainDiv.offsetLeft -(floatSpanId.offsetWidth/2);
            let moveY = ev.clientY- mainDiv.offsetTop - (floatSpanId.offsetHeight/2);

            // 小黄框的最大边界
            // middleId.offsetLeft，middleId.offsetTop  都是0
            // 因为 middleId 是绝对定位，且left，top为0~~！！？？
            // 所以是一样的
            let moveXMax =  (middleId.offsetLeft + middleId.offsetWidth) - floatSpanId.offsetWidth;
            let moveYMax =  (middleId.offsetTop + middleId.offsetHeight) - floatSpanId.offsetHeight;
            // let moveXMax =  middleId.offsetWidth - floatSpanId.offsetWidth;
            // let moveYMax =  middleId.offsetHeight - floatSpanId.offsetHeight;

            // 三目运算
            // 小黄框可不出middleId边框 - START
            moveX = moveX < 0 ? 0 : moveX;
            moveX = moveX > moveXMax ? moveXMax : moveX;
            moveY = moveY < 0 ? 0 : moveY;
            moveY = moveY > moveYMax ? moveYMax : moveY;
            // 小黄框可不出middleId边框 - END

            floatSpanId.style.left =  moveX + "px"; 
            floatSpanId.style.top =  moveY + "px"; 

            // 计算big div 的坐标
            var maxImageHeight = big.children[0].offsetHeight - (big.offsetHeight-2)
            var maxImageWidth = big.children[0].offsetWidth - (big.offsetWidth-2)

            big.children[0].style.left = -(floatSpanId.offsetLeft/moveXMax)*maxImageWidth+'px';
            big.children[0].style.top = -(floatSpanId.offsetTop/moveYMax)*maxImageHeight+'px';
        }

        // 【晓踩一坑】小黄框的移动事件
        // 这个有个什么问题呢
        // 就感觉 只有鼠标在小黄框里面的时候
        // 才是动的
        // 但是在大框里面时候，拖拽小黄框的时候
        // 却动不起来
        // 不知道是不是因为触发了 小黄框的onmousedown 这个事件而受到了影响
        // floatSpanId.onmousemove = function(e){

        //     ev = e || event;
        //     // console.log("middleId.onmousemove===" + ev.clientX);

        //     floatSpanId.style.left =  ev.clientX- mainDiv.offsetLeft -(floatSpanId.offsetWidth/2) + "px"; 
        //     floatSpanId.style.top =  ev.clientY- mainDiv.offsetTop - (floatSpanId.offsetHeight/2) + "px"; 
        // }

        // 【晓踩二坑】小黄框的拽下事件
        // // 里面的黄色的小框的拖拽
        // 这个事件的绑定是不可以的
        // 因为 ev.clientX , ev.clientY 是不正确的
        // 他两是你开始拖拽那个时间点的坐标点
        // 就是那个时间点的 坐标
        // 后来你再怎么拖拽移动的，这两都不会发生改变
        // 所以 不正
        // floatSpanId.onmousedown = function(e){
        //     ev = e || event;
        //     console.log("floatSpanId.onmousedown===" + ev.clientX);
        //     // floatSpanId.style.left =  ev.clientX- mainDiv.offsetLeft -(floatSpanId.offsetWidth/2) + "px"; 
        //     // // console.log(ev.clientX);
        //     // floatSpanId.style.top =  ev.clientY- mainDiv.offsetTop - (floatSpanId.offsetHeight/2) + "px"; 
        // }

        floatSpanId.onmouseup = function(e){

        }
        
        // middleId.onmousemove = function(e){

        //     ev = e || event;
        //     floatSpanId.style.left =  ev.clientX + "px"; 
        //     // console.log(ev.clientX);
        //     floatSpanId.style.top =  ev.clientY + "px";  
        // }



    </script>