JS放大鏡特效（相容版）

原理

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

設計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"; //
osmall.offsetleft的值是相對什麼而言
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";
}

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>放大鏡
title
>
<
style
>
* #demo 
#small-box 
#float-box 
#mark 
#big-box 
#big-box img 
style
>
<
script
>
//頁面載入完畢後執行
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.滑鼠在小上移動時，通過捕獲滑鼠在小上的位置，定位大的相應位置 設計2.技術點 事件捕獲 定位 1 onmouseover 會在滑鼠指標移動到指定的物件上時發生 2 onmouseout 會在滑鼠指標移出指定的物件時發生 3 onmousemove 會在滑鼠指標移動時發生 4 各邊距表示 5...

js放大鏡特效

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

放大鏡特效

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