js技能提升——原生js实现图片放大镜效果

淡淡的烟草味﹌ 2021-07-25 16:19 549阅读 0赞

# js技能提升 #

鉴于我的工作经验较少，为了能够早日实现自己成为前端大佬的目标，也为了更好的工作，因此开始js技能的训练。  
之前的半年多的时间一直在做uniapp和elementUi的项目，对js的操作基本为0.话说用过vue之后，应该很少会用到js或者jq。  
算了，不给自己找借口了，js技能提升走起！

实现效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
实现功能介绍：  
1.图片根据鼠标移动的区域进行右侧放大展示  
2.底部图片切换可改变要放大的图片

具体代码如下： html部分

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./index.css">
    </head>
    
    <body>
        <div class="app" id="app">
            <div class="big-pic">
                <div class="move"></div>
                <div class="bigPic"></div>
            </div>
            <div class="imgList">
                <div class="small-img">
                    <img class="active" src="./img/1.jpg">
                </div>
                <div class="small-img">
                    <img src="./img/2.jpg">
                </div>
                <div class="small-img">
                    <img src="./img/3.jpg">
                </div>
                <div class="small-img">
                    <img src="./img/4.jpg">
                </div>
                <div class="small-img">
                    <img src="./img/5.jpg">
                </div>
            </div>
        </div>
    </body>
    <script src="./index.js"></script>
    
    </html>

* { 
        margin: 0;
        padding: 0;
    }
    
    .app { 
        width: 1000px;
        height: 600px;
        position: relative;
        top: 20px;
        left: 20px;
    }
    
    .big-pic { 
        width: 100%;
        height: 100%;
        background: url('./img/1.jpg') no-repeat top left;
        /* background-image: url('./img/1.jpg') no-repeat top left; */
        background-size: 100% 100%;
        cursor: move;
    }
    
    .big-pic .move { 
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
        background: rgba(0, 0, 255, 0.15);
        display: none;
    }
    
    .big-pic .bigPic { 
        width: 600px;
        height: 600px;
        position: absolute;
        left: 1020px;
        top: 0;
        background: url('./img/1.jpg') no-repeat top left;
        background-position: 0 0;
        background-size: 500% 300%;
        display: none;
    }
    
    .imgList { 
        width: 600px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }
    
    .small-img { 
        width: 110px;
    }
    
    .small-img img.active { 
        border: 2px solid red;
    }
    
    .small-img img { 
        width: 100%;
    }

js部分是重点

//先获取要用到的dom，存储为变量，可以节省获取dom的时间
    var oApp = document.getElementById("app");//获取最外层，如果页面有其他元素可以防止冲突
    var oBigPic = oApp.getElementByClassName('big-pic')[0];//添加mousemove鼠标移动事件
    var oMove = oBigPic.getElementByClassName('move')[0];//获取鼠标移动的区域
    var oBigImg = oBigPic.getElementByClassName('bigPic')[0];//获取右侧大图展示区域
    
    var imgArr = document.getElementByClassName('small-img');//获取小图列表，可以循环绑定点击事件
    //为了能够点击图片的时候去掉其他图片的border，也就是active类名，可以初始化时定义一个变量来处理
    var activeImg = imgArr[0];
    
    // 获取元素的初始位置
    var AppLeft = oApp.offsetLeft;
    var APPTop = oApp.offsetTop;
    var oMoveWidth = oMove.offsetWidth;
    var oMoveHeight = oMove.offsetHeight;
    move();//创建Move事件，并函数执行
    function move(){ 
    	oMove.onmousemove = function(e){ 
    		//elclientX 是鼠标位置距离屏幕左侧的距离，减去 oApp的OffsetLeft就是距离oApp左侧的数值，也就是left值，如果再减去oMove宽度的一半，就是oMove的left值了，e.clientY同理。
    		oMove.style.left = e.clientX - AppLeft - oMoveWidth / 2 + "px";
    		oMove.style.top = e.clientY - AppTop - oMoveHeight / 2 + "px";
    		// 右侧大图展示区域展示的内容可以根据move区域的位置来，
    		oBigImg.style.backgroundPositonX = -(e.clientX - AppLeft - oMoveWidth / 2 )*3;
    		oBigImg.style.backgroundPositonY = -(e.clientY - AppTop - oMoveHeight / 2 )*3;
    	}
    }
    //定义小图点击事件
    imgClick();
    function imgClick (){ 
    	//imgArr 是小图dom元素的集合，可以通过循环遍历然后给每个图绑定点击事件
    	for(var i =0;i<imgArr.length;i++){ 
    		imgArr[i].onclick = function(){ 
    			imgArr[i].classList.add('active');
    			activeImg.classList.remove('active');
    			activeImg = imgArr[i];
    		}
    		//结果执行上面的代码时，控制台一直报错，而且也没有给点击的小图加上border，最终改为下面的方式才有效果
    		var oImg = imgArr[i];
    		oImg.onclick = function(){ 
    			oImg.classList.add('active');
    			activeImg.classList.remove('active');
    			activeImg = oImg;
    		}
    		//能够绑定active类名了，现在有个新的问题，无论点击哪个小图，都会只给最后一项添加active，原因是闭包，for循环中如果出现了闭包，可以通过立即执行函数的方式来处理，代码如下
    		(function(){ 
    			var oImg = imgArr[i];
    			oImg.onclick = function(){ 
    				oImg.classList.add('active');
    				activeImg.classList.remove('active');
    				activeImg = oImg;
    				//此时可以通过getAttribute的方式获取当前选中小图的src内容，然后赋值给bigImg和bigPic两个元素
    				var img = oImg.getAttribute('src');
    				oBigPic.style.backgroundImage = "url("+ img +")";
    				oBigImg.style.backgroundImage = "url("+ img +")";
    			}
    		})()
    	}
    }

完成！

写这个的过程中，发现了好多自己忘记的内容，需要尽快拾起来。加油！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/d868e6d4b4bb4f3da4de44a4c3fe4def.png