喜歡的童鞋可以留郵箱給大家發(fā)原型奧朱盐！
效果簡介
網(wǎng)頁版淘寶涝缝，小方塊隨著鼠標(biāo)的移動(dòng)而移動(dòng)，右側(cè)顯示小方塊在左側(cè)圖片的放大部分淡溯，效果如下圖读整。
步驟
動(dòng)畫大體上分為兩部分：
第一部分，小方塊隨著鼠標(biāo)的移動(dòng)而移動(dòng)咱娶；
第二部分米间，右側(cè)放大圖顯示小方塊所在區(qū)域的內(nèi)容。
(先介紹第一部分）
1膘侮、找圖屈糊，貼圖。
找一張喜歡的圖片貼上去（最喜歡艾斯了）琼了，大圖設(shè)置為400x400逻锐；中間的小圖設(shè)為160x160，黑色，透明度8昧诱。艾斯大圖名稱“datu”晓淀，透明小圖名稱“xiaotu”。
<可以想一下為什么要設(shè)置為400x400盏档，160x160凶掰，評論回答~>
2、讓xiaotu隨著鼠標(biāo)的移動(dòng)而移動(dòng)妆丘。
? ? ? 可以想一下锄俄，鼠標(biāo)在datu的范圍內(nèi)走到哪兒，xiaotu就跟到哪兒勺拣，所以應(yīng)該在datu上添加【鼠標(biāo)移動(dòng)時(shí)】事件奶赠。
“xiaotu隨鼠標(biāo)移動(dòng)”的過程，轉(zhuǎn)化為公式就是“使得xiaotu的中心的坐標(biāo)和鼠標(biāo)的坐標(biāo)重合”药有，關(guān)系式為【鼠標(biāo).x = xiaotu.x + xiaotu.width/2】【鼠標(biāo).y = xiaotu.y + xiaotu.height/2】毅戈。
f(x)和f(y)的值分別為：
target：目標(biāo)。
【鼠標(biāo)移動(dòng)時(shí)】事件作用在datu上愤惰，而移動(dòng)的是xiaotu苇经，所以xiaotu就是目標(biāo)元件。
鼠標(biāo)的坐標(biāo)為（Cursor.x宦言，Cursor.y）
理解不了target的扇单，還可以用這種方式，效果一樣但更好理解：
3奠旺、到目前為止xiaotu隨著鼠標(biāo)的移動(dòng)而移動(dòng)的效果已經(jīng)出來蜘澜，但還存在兩個(gè)問題，①由于沒有設(shè)置移動(dòng)范圍响疚，鼠標(biāo)超出datu的范圍鄙信，xiaotu也會(huì)跟著跑出去；②xiaotu雖然會(huì)隨著鼠標(biāo)的移動(dòng)而移動(dòng)忿晕，但因?yàn)槭髽?biāo)是作用在datu上的装诡，而xiaotu覆蓋在datu上，鼠標(biāo)在xiaotu上面践盼，所以中間的xiaotu層阻斷了鼠標(biāo)和datu的接觸鸦采。造成鼠標(biāo)在xiaotu范圍內(nèi)無論怎么移動(dòng)xiaotu都不會(huì)移動(dòng)，只有鼠標(biāo)移出xiaotu的范圍咕幻，xiaotu才會(huì)跟隨鼠標(biāo)移動(dòng)赖淤。如圖(原諒我的拍照技術(shù))：
有了問題就來解決問題，一個(gè)一個(gè)來~
①超出范圍的問題谅河。
超出范圍是指xiaotu超出datu上咱旱、下确丢、左、右的邊框吐限，所以只要給xiaotu設(shè)置范圍就行：
e.g.如果xiaotu的左邊框超出datu的左邊框鲜侥，則將xiaotu左邊框和datu左邊框?qū)R，xiaotu高度保持不變诸典。其余三條邊框同理描函。
轉(zhuǎn)化為關(guān)系式就是：
左：if(xiaotu.x < datu.x )，則移動(dòng)xiaotu的位置到（datu.x狐粱，xiaotu.y）;
右：if(xiaotu.right > datu.right )辛润，則移動(dòng)xiaotu的位置到（datu.right - xiaotu.width 败许，xiaotu.y）;
上：if(xiaotu.y < datu.y )刻蚯，則移動(dòng)xiaotu的位置到（xiaotu.x恕刘，datu.y）;
下：if(xiaotu.bottom > datu.bottom )，則移動(dòng)xiaotu的位置到（xiaotu.x蒋搜，datu.bottom-xiaotu.height）篡撵。
同樣在datu上添加【鼠標(biāo)移動(dòng)時(shí)】事件，點(diǎn)擊【添加條件】豆挽，
點(diǎn)擊【確定】設(shè)置好條件育谬，移動(dòng)xiaotu，如圖：
注意切換 if 帮哈、else if膛檀，全部切換為 if 條件。
②鼠標(biāo)在xiaotu范圍內(nèi)娘侍，xiaotu不隨著移動(dòng)的問題咖刃。
核心問題就是，xiaotu層不能阻擋鼠標(biāo)在datu上的移動(dòng)私蕾，但又不能把datu覆蓋在xiaotu上僵缺。所以解決辦法就是再在xiaotu上覆蓋一層透明圖胡桃，大小和datu一樣踩叭，然后把datu上的【鼠標(biāo)移動(dòng)時(shí)】事件復(fù)制到透明圖上。
這樣就可以啦翠胰！
4容贝、接下來就是右側(cè)的放大圖顯示區(qū)（名稱fangdaqu）。
它體現(xiàn)出來的過程是斤富，xiaotu移到哪兒，右側(cè)fangdatu顯示區(qū)就顯示哪個(gè)部位满力。換成邏輯來想，在這個(gè)例子中油额，xiaotu尺寸為160x160，datu尺寸為400x400潦嘶，右側(cè)fangdaqu尺寸為400x400，也就是要把160x160的圖片全屏顯示在400x400的畫面上掂僵，放大2.5倍航厚。右側(cè)顯示區(qū)只顯示被xiaotu覆蓋的放大部分，可以得到一個(gè)比例算式：（邊長之比）
xiaotu:datu = fangdaqu:最大圖锰蓬，得到160:400 = 400:最大圖幔睬，所以最大圖長為1000。
我們放動(dòng)態(tài)面板作為顯示區(qū)互妓，動(dòng)態(tài)面板大小為400x400溪窒，點(diǎn)擊進(jìn)入，放圖片冯勉，將其尺寸設(shè)置為1000x1000澈蚌，如圖：
? ? ? 放大顯示的過程，其實(shí)就是zuidatu隨著xiaotu有規(guī)律移動(dòng)的過程灼狰。在這個(gè)例子中宛瞄，xiaotu向右移動(dòng)1個(gè)單位，zuidatu就要向左移動(dòng)2.5個(gè)單位交胚。所以鼠標(biāo)移動(dòng)的過程是作用在xiaotu上的份汗。所以zuidatu移動(dòng)的距離為：
x軸：（datu.x - xiaotu.x）*2.5。
y軸：（datu.y - xiaotu.y）*2.5蝴簇。
注意：
不是【鼠標(biāo)移動(dòng)時(shí)】事件杯活，是【移動(dòng)時(shí)】事件！０敬省Ｅ跃！【移動(dòng)時(shí)】【移動(dòng)時(shí)】；ナ啊Ｍ峤瘛！重要的事情說三遍颜矿，因?yàn)槲覍懙臅r(shí)候感覺邏輯沒毛病啊寄猩，為啥就是不移動(dòng)咧！就是因?yàn)槲矣昧恕臼髽?biāo)移動(dòng)時(shí)】事件了骑疆！
到此為止田篇，放大的效果已經(jīng)出來了替废，如圖：
5、最后一步泊柬，添加小圖切換效果彬呻。這個(gè)要用到中繼器闸氮。
點(diǎn)擊中繼器，將原有的刪除译断，替換成圖片孙咪，如圖：
然后回到首頁翎蹈，點(diǎn)擊中繼器荤堪，將中繼器的布局設(shè)置為“水平”澄阳，如圖：
6碎赢、添加要切換的圖片肮塞，點(diǎn)擊屬性（要顯示的圖片是三個(gè)尺寸峦嗤，第一個(gè)是左下中繼器切換的60x60的小圖，第二個(gè)是左上的400x400的datu替梨，第三個(gè)是右邊1000x1000的fangdatu）。橫向添加3種格式的圖片弓熏，第一列為序號(hào)挽鞠。每一行導(dǎo)入的圖片是相同的信认，想切換幾張圖片嫁赏，就添加幾列潦蝇，在這兒演示常見的切換四張圖片的攘乒。選中某一個(gè)，右擊“導(dǎo)入圖片”盔夜，就可以添加想要的圖片喂链，如圖：
設(shè)置完成后椭微，如圖：
然后點(diǎn)擊“中繼器”蝇率，設(shè)置【每項(xiàng)加載時(shí)】事件本慕，設(shè)置小的切換圖片锅尘，如圖：
設(shè)置完成后的效果就是這個(gè)樣子藤违，如圖：
7顿乒、我們要的效果是，點(diǎn)擊每一張小圖特漩，datu和fangdatu都跟著變化拾稳，所以访得，在中繼器點(diǎn)擊進(jìn)入的圖片上添加【鼠標(biāo)單擊時(shí)】事件陕凹，如圖：
進(jìn)入【鼠標(biāo)單擊時(shí)】事件搜骡，點(diǎn)擊【設(shè)置圖片】佑女，然后設(shè)置datu和zuidatu的圖片记靡，如圖：
到此，基本效果已經(jīng)出來寸痢，如圖：
8啼止、但有些小細(xì)節(jié)還沒有優(yōu)化兵罢，比如左下的每個(gè)切換小圖之間要間隔一點(diǎn)距離才好看卖词；比如只有當(dāng)鼠標(biāo)移到datu上時(shí)，xiaotu才顯示，右側(cè)的放大圖也才在此刻顯示舶替。
先優(yōu)化第一個(gè)顾瞪，回到主頁陈醒，點(diǎn)擊中繼器钉跷，如圖：
再優(yōu)化第二個(gè)問題爷辙，在datu上添加【鼠標(biāo)移入時(shí)】事件膝晾，當(dāng)鼠標(biāo)移入datu范圍時(shí)，xiaotu和zuidatu顯示幻赚；再添加【鼠標(biāo)移出時(shí)】事件落恼，當(dāng)鼠標(biāo)移出datu范圍時(shí)离熏，xiaotu和zuidatu隱藏撤奸。
9、終于寫完啦矢棚！寫了將近兩個(gè)禮拜的零碎時(shí)間捌牙摺兜粘！
