JS放大鏡特效(相容版)

2021-07-29 21:42:18 字數 2534 閱讀 9734

原理

1.滑鼠在小上移動時,通過捕獲滑鼠在小上的位置,定位大的相應位置

設計2.技術點:事件捕獲、定位

1)onmouseover:會在滑鼠指標移動到指定的物件上時發生

2)onmouseout:會在滑鼠指標移出指定的物件時發生

3)onmousemove:會在滑鼠指標移動時發生

4)各邊距表示

5)ofgsetleft與style.left對比

style.left返回的是字串,比如:30px,offsetleft返回的是數值30

style.left是可讀寫的,offsetleft是只讀寫的,所以該改變div的位置,只能修改style.left

style.left的值需事件定義,否則取到的值為空

3.難點:計算

objmark.onmousemove = function (ev)  else if (left > (objmark.offsetwidth - objfloatbox.offsetwidth))   

//當放大鏡查出縱向範圍的時候

if (top < 0) else if (top > (objmark.offsetheight - objfloatbox.offsetheight))

objfloatbox.style

.left = left + "px"

; 的值是相對什麼而言

objfloatbox.style

.top = top + "px"

; var percentx = left / (objmark.offsetwidth - objfloatbox.offsetwidth);

var percenty = top / (objmark.offsetheight - objfloatbox.offsetheight);

objbigboximage.style

.left = -percentx * (objbigboximage.offsetwidth - objbigbox.offsetwidth) + "px"

; objbigboximage.style

.top = -percenty * (objbigboximage.offsetheight - objbigbox.offsetheight) + "px"

; }

原始碼:

charset="utf-8">

放大鏡title>

*

#demo

#small-box

#float-box

#mark

#big-box

#big-box

img

style>

//頁面載入完畢後執行

window.onload = function

()

objmark.onmouseout = function

()

objmark.onmousemove = function

(ev) else

if (left > (objmark.offsetwidth - objfloatbox.offsetwidth))

if (top < 0) else

if (top > (objmark.offsetheight - objfloatbox.offsetheight))

objfloatbox.style.left = left + "px"; 的值是相對什麼而言

JS放大鏡特效(相容版)

原理 1.滑鼠在小上移動時,通過捕獲滑鼠在小上的位置,定位大的相應位置 設計1.頁面元素 小 大 放大鏡 2.技術點 事件捕獲 定位 1 onmouseover 會在滑鼠指標移動到指定的物件上時發生 2 onmouseout 會在滑鼠指標移出指定的物件時發生 3 onmousemove 會在滑鼠指標...

js放大鏡特效

原理分析 當滑鼠在小上移動時,通過捕捉滑鼠在小上的位置,定位大的相應位置。同時,當滑鼠在小上移動時,右側大往相反的方向移動。放大鏡特效設計 事件捕獲 onmouseover 當滑鼠指標移動到指定物件上時發生 onmouseout 當滑鼠指標移除指定物件時發生 onmousemove 當滑鼠指標移動時...

放大鏡特效

掌握頁面元素定位和移動 放大鏡關鍵原理 滑鼠在小上移動時,通過捕捉滑鼠在小上的位置定位大的相應位置 技術點 事件捕獲 定位 offsetleft與style.left的對比 1 offsetleft是與父級元素的距離,不包過滾動條的距離 2 style.left返回的是字串,如30px,offset...