JS放大鏡特效（相容版）

原理

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...