仿京東放大鏡效果

案例分析：

1.整個案例可以分為三個功能模組；

2.滑鼠經過小盒子，黃色的遮擋層和大盒子顯示，離開時2個盒子隱藏功能；

3.黃色的遮擋層跟隨滑鼠移動功能；

4.移動黃色遮擋層，大跟隨移動功能。

效果：

html部分

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>仿京東放大鏡效果
title
>
6<
link 
rel="stylesheet"
href
="detail.css"
>
7<
script 
src="detail.js"
>
script
>
8head
>
9<
body
>
10<
div 
class
="preview"
>
11<
img 
src=".."
alt=""
class
="preview_img"
>
12<
div 
class
="mask"
>
div>
13<
div 
class
="big"
>
14<
img 
src=".."
alt=""
class
="big_img"
>
15div
>
16div
>
17body
>
18html
>

css部分

1*5

.preview
12.preview_img
16.mask
28.big
39.big_img

1

//因為是外部的js，所以要等頁面載入完畢執行
2 window.addeventlistener('load',function
())11 preview.addeventlistener('mouseout',function
())15
//2.滑鼠移動事件
16 preview.addeventlistener('mousemove',function
(e)else
if(maskx >=maskmax)
31if(masky <= 0)else
if(masky >=maskmax)
36 mask.style.left = maskx + 'px';
37 mask.style.top = masky + 'px';
38//
3.大跟隨移動功能
39//
大移動距離=遮擋層移動距離*大最大移動距離/遮擋層最大移動距離
40var bigimg = document.queryselector('.big_img');
41//
大最大移動距離
42var bigmax = big.offsetwidth -bigimg.offsetwidth;
43//
大的移動距離
44var bigx = maskx * bigmax /maskmax;
45var bigy = masky * bigmax /maskmax;
46 bigimg.style.left = bigx + 'px'; //
47 bigimg.style.top = bigy + 'px';
48})
49 })

京東放大鏡效果

先上html和css box box1 box1 img mask mask hover box2 box2 img 前面滑鼠覆蓋出現，滑鼠離開消失等都不難。先獲取各個元素，設定display屬性就好了。直接上 let mask document.queryselector mask let box...

js 仿京東放大鏡

功能模組 整個案例可以分為三個功能模組 滑鼠經過小盒子，黃色的遮擋層 和 大盒子顯示，離開隱藏2個盒子功能 黃色的遮擋層跟隨滑鼠功能。移動黃色遮擋層，大跟隨移動功能。案例分析 黃色的遮擋層跟隨滑鼠功能。把滑鼠座標給遮擋層不合適。因為遮擋層座標以父盒子為準。首先是獲得滑鼠在盒子的座標。之後把數值給遮擋...

JS 仿京東放大鏡

滑鼠移動的時候黃色背景層跟著移動 16 content.addeventlistener mousemove function e else if maskx maskmax 30if masky 0 else if masky maskmax 35 mask.style.left maskx px...