首先是html結構，結構主要就三塊，放大鏡，小圖和大圖區域，我們都用div來實現。

圖是在淘寶取的網絡地址。

css代碼我就不截圖了，簡單說幾個需要注意的地方就行，一個就是放大鏡需要設置透明度，這個透明度多少就看你自己喜歡了。第二個就是大圖區的背景圖需要設置為兩倍的大小。當然不一定要是兩倍，但一定要比本身的寬高要大，不然無法取得放大的效果。

我們主要來看看js代碼，

簡單解釋代碼： 1.鼠標移入事件，讓放大鏡出現，并且設置出現的位置為貼靠在小圖的邊緣。 2.鼠標移動事件，鼠標移動伴隨著放大鏡的移動。當然這里也有限制，鼠標一旦超出，放大鏡就會貼靠或者消失。計算鼠標的xy值，xy值減去放大鏡寬高的一半就是放大鏡的xy值，通過放大鏡的xy值再減去小圖的xy值，就可以算出放大鏡移動的距離。根據移動的距離*2，就是大圖背景移動的距離。 邏輯比較繞，覺得繞的可以在紙上畫個圖來分辨這些距離。
作者：扶墻哥
來源：掘金