京東放大鏡效果

先上html和css**

.box 
.box1 
.box1 img 
.mask 
.mask:hover 
.box2 
.box2 img 

let mask = document.queryselector(".mask")

let box1 = document.queryselector(".box1")
let box2 = document.queryselector(".box2")
let bigimg = document.queryselector(".box2 img")
box1.addeventlistener("mouseover", function(e) )
box1.addeventlistener("mouseout", function() )

遮擋層移動距離 / 遮擋層最大移動距離= 大移動距離 / 大最大移動距離

這裡還加了碰撞檢測，防止黃色遮罩層跑出盒子外面。

js**如下：

box1.addeventlistener("mousemove", function(e)  else if (maskx > box1.offsetwidth - mask.offsetwidth) 

if (masky < 0)  else if (masky > box1.offsetheight - mask.offsetheight) 
mask.style.left = maskx + "px";
mask.style.top = masky + "px";
//遮擋層移動距離/遮擋層最大移動距離= 大移動距離/大最大移動距離
//  maskx/box1.offsetwidth - mask.offsetwidth
// 遮擋層最大移動距離
var maskmax = box1.offsetwidth - mask.offsetwidth
//大圖移動距離
var bigmax = bigimg.offsetwidth - box2.offsetwidth
var bigx = maskx * bigmax / maskmax
var bigy = masky * bigmax / maskmax
//注意這裡是負的值，因為移動方向要和屬性方向相反
bigimg.style.left = -bigx + "px";
bigimg.style.top = -bigy + "px";
})

仿京東放大鏡效果

案例分析 1.整個案例可以分為三個功能模組 2.滑鼠經過小盒子，黃色的遮擋層和大盒子顯示，離開時2個盒子隱藏功能 3.黃色的遮擋層跟隨滑鼠移動功能 4.移動黃色遮擋層，大跟隨移動功能。效果 html部分 1 doctype html 2 html lang en 3 head 4 meta char...

WPF放大鏡效果

原文 wpf放大鏡效果 在做wpf專案中，不止兩個專案需要有放大鏡功能。第乙個專案是乙個手術室的遠端示教系統，主要是為了方便專家演示病症時，可以放大上的某些部位。第二個專案是乙個工廠的mes專案，其中有個功能是質量預警，主要就是根據疵點，對比實物進行預警。可是疵點很小，這時就需要乙個放大鏡的功能。效...

放大鏡效果（offset）

注 preview img 初始 需要放大的 mask 遮擋層 big 大盒子 preview img.addeventlistener mousemove function e else if maskx maskmax if masky 0 else if masky maskmax mask....