javascript淘寶主圖放大鏡功能

時間 2019-12-06

原文原文鏈接

工欲善其事，必先利其器。想要實現某一種效果，咱們必需要先了解其中的原理。javascript

放大鏡的功能就是經過獲取鼠標在小圖中的位置，而後根據大小圖的尺寸比例換算出大圖須要顯示的部分，而後使用定位讓大圖要顯示的部分出如今右邊的邊框內。css

而後看代碼，根據代碼看講解會更容易理解。html

html部分java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大鏡效果</title>
    <link rel="stylesheet" href="magnifier.css">
</head>
<body>
    <div id="wrapper">
    <!--小圖-->
        <div id="img_min">
        <!--圖片-->
        <img src="test.jpg" alt="min">
        <!--跟隨鼠標的白塊-->
        <p id="mousebg"></p>
        </div>
        <!--大圖-->
        <div id="img_max"><img id="img2_img" src="test.jpg" alt="max"></div>
    </div>
    <script type="text/javascript" src="magnifier.js"></script>
</body>
</html>

css部分app

*{
    margin: 0;
    padding: 0;
}
div{
    position: relative;
}
div>div{
    width: 300px;
    height: 300px;
    float: left;
    margin: 100px;
    overflow: hidden;
}
#img_min>img{
	/*display: block;*/
    width: 300px;
}
#img_max{
    display: none;
    
}
#img_max>img{
	position: absolute;
	top: 0;
	left: 0;
	display: block;
    width: 1500px;
}
#mousebg{
	display: none;
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: rgba(255,255,255,.7);
	top: 0;
	left: 0;
}

最重要的javascript部分佈局

window.onload = function () {
    var img1 = document.getElementById('img_min');//小圖盒子
    var img2 = document.getElementById('img_max');//大圖盒子
    var img2_img = document.getElementById('img2_img');//大圖圖片
    var wrap = document.getElementById('wrapper');
    var mousebg = document.getElementById('mousebg');//鼠標白塊
    var mul = 5;
    //當某一個模塊dispaly:none的時候不能使用offsetWidth獲取它的寬高
    img1.onmouseover = function () {
		//鼠標進入
        img2.style.display = 'block';
        mousebg.style.display = 'block';
        
    }
    img1.onmouseout = function () {
	    //鼠標離開
        img2.style.display = 'none';
        mousebg.style.display = 'none';
    }
    img1.onmousemove = function (event) {
        var _event = event||window.event;//兼容性處理
        var mouseX = _event.clientX - wrap.offsetLeft - img1.offsetLeft;
        //計算鼠標相對與小圖的位置
        var mouseY = _event.clientY - wrap.offsetTop - img1.offsetTop;

		//特殊狀況處理，分別靠近四條邊的時候
		if(mouseX<mousebg.offsetWidth/2){
			mouseX = mousebg.offsetWidth/2;
		}
		if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){
			mouseX = img1.offsetWidth-mousebg.offsetWidth/2;
		}
		if(mouseY<mousebg.offsetHeight/2){
			mouseY = mousebg.offsetHeight/2;
		}
		if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){
			mouseY = img1.offsetHeight-mousebg.offsetHeight/2;
		}
		//計算大圖的顯示範圍
		img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px";
	    img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px";
	   //使鼠標在白塊的中間
		mousebg.style.left = mouseX-mousebg.offsetWidth/2+"px";
		mousebg.style.top = mouseY-mousebg.offsetHeight/2+"px";
        
    }
}

若是你看完代碼和註釋已經理解了，用李雲龍的一句話說：「哎呀，你小子tnd還真是個天才」。那麼下面的解析部分你快速的瀏覽完就OK了。

解析部分：spa

html和css部分都是簡單的佈局代碼，再也不講解，js部分代碼也比較簡單，咱們直接講解鼠標移動事件部分的代碼。code

首先用一張圖來解釋一下獲取鼠標相對與小圖位置的原理htm

能夠看到經過代碼中的運算，咱們所獲取的值就是鼠標相對於img1左上角的值。seo

理解了這一步以後，其實能夠說咱們的工做已經完成了一半了。

而後，咱們先跳過特殊狀況的處理，直接進行右邊圖片定位的基本運算。

由於有用到offsetWidth、offsetHeight、style.width、style.height屬性，其中style.width、style.height和offsetWidth、offsetHeight的範圍是相同的，其餘不一樣我會在另外一篇博客中詳細描述。咱們先用一張圖瞭解下這幾個屬性，同時和上面的幾個屬性進行對比（圖片來自互聯網，侵刪）

而後咱們講解代碼

右邊大圖框中的圖片使用style.left定位在大圖框中的位置，負號是由於咱們鼠標的運動方向恰好是和咱們大圖框中的圖片運動的方向相反，mul則是根據大圖和小圖的尺寸計算出來的比例，-mul*mouseX計算出來的其實就是圖片在大圖框中的相對位置，可是此時你會發現你鼠標所在的位置在右邊是在圖框的左上角的，因此咱們要加上一個 img2.offsetWidth/2 來讓圖片居中顯示。一樣咱們在縱座標進行相同的處理就行了。

//計算大圖的顯示範圍
		img2_img.style.left = -mul*mouseX+img2.offsetWidth/2+"px";
	    img2_img.style.top = -mul*mouseY+img2.offsetHeight/2+"px";

下面咱們就要進行特殊狀況的處理了，作到上一步的時候你會發現，在鼠標移動到邊緣的時候，鼠標那個小白塊有時候會跑出圖片的範圍，因此咱們就要進行處理將它限制在圖片的範圍內，由於鼠標是在白色透明塊的中間，因此咱們就是將鼠標限制在距離圖片邊框上下左右二分之一白塊長/寬的位置便可。

//特殊狀況處理，分別靠近四條邊的時候
		if(mouseX<mousebg.offsetWidth/2){
			mouseX = mousebg.offsetWidth/2;
		}
		if(mouseX>img1.offsetWidth-mousebg.offsetWidth/2){
			mouseX = img1.offsetWidth-mousebg.offsetWidth/2;
		}
		if(mouseY<mousebg.offsetHeight/2){
			mouseY = mousebg.offsetHeight/2;
		}
		if(mouseY>img1.offsetHeight-mousebg.offsetHeight/2){
			mouseY = img1.offsetHeight-mousebg.offsetHeight/2;
		}

當距離左邊小於二分之一寬的時候，咱們就讓mouseX等於二分之一寬，這樣白塊就不會繼續移動，其餘三個方向同理。

作完這一步，咱們的效果也就所有完成了。

ps:抽象的地方能夠經過畫圖來幫助理解

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。