原生js寫放大鏡

2021-09-26 20:50:10 字數 1415 閱讀 1781

**不多,如下:

放大鏡title

>

>

.box1,.box2

.box1

.box2

.little-box

style

>

head

>

>

class

="box1"

>

class

="little-box"

>

div>

div>

class

="box2"

>

div>

>

var lb = document.

getelementsbyclassname

('little-box')[

0];var fb = document.

getelementsbyclassname

('box2')[

0];/*滑鼠按下*/

lb.onmousedown

=function()

if(fdl>

100)

if(fdt<0)

if(fdt>

100)

lb.style.left = fdl+

"px"

; lb.style.top = fdt +

"px"

;/*放大的內容等於小盒子的位置乘於放大的倍數,用的是背景圖,所以加乙個負號*/

fb.style.backgroundposition =((

-3*fdl +

'px')+

' '+(-

3*fdt +

'px'))

;};/*滑鼠抬起時*/

document.

onmouseup

=function()

return

false;}

script

>

body

>

html

>

-_-!又帶水印。。。。大家忽略就好

原生js實現放大鏡效果

我們平時在電商 購物時,需要對選取的某乙個商品進行詳情檢視,此時當滑鼠在商品上某一部分移動檢視時旁邊就會出現乙個該部分的放大效果,這樣就能夠更好的對商品進行分析,下面就使用原生js來實現一下類似放大鏡的效果。思路分析 1.滑鼠切換列表時,pic盒子中的相對應切換 2.在.pic中生成乙個.zoom的...

放大鏡原生實現

分析 難點列出 1.滑鼠在區域時,透明小區域出現,放大的區域出現 2.滑鼠移出時,透明小區域小時,放大區域消失 3.透明小區域隨著滑鼠移動 難點解決關鍵 對應解決回答 1.通過滑鼠onmourseover監聽滑鼠的略過,改變透明小區域和放大區域的display,置為block 2.通過滑鼠onmou...

原生js實現商品放大鏡效果

小方塊跟隨滑鼠移動 original move.style.left e.offsetx parseint getcomputedstyle original move width 0.5 px original move.style.top e.offsety parseint getcomput...