? ? ? ?研究了網(wǎng)上的原型例子细燎，自己嘗試著重新做了一次两曼，基本效果全部達(dá)到，視覺效果也還算滿意玻驻，感覺可以試著寫篇教程合愈。不過畢竟是第一次，有些細(xì)節(jié)地方可能理解的也不到位击狮，haha
下面是兩張效果圖：
? ? ? ? ?動(dòng)態(tài)圖片墻，主要實(shí)現(xiàn)的功能是圖片懸停的動(dòng)態(tài)模糊及點(diǎn)擊全屏顯示益老。完成這些功能彪蓬，主要用到了中繼器里圖片的插入，以及對頁面進(jìn)行設(shè)置捺萌。
? ? ? ? ? 1.首先是拖拉一個(gè)中繼器档冬，對他進(jìn)行命名，雙擊進(jìn)去桃纯，刪除中繼器原有的內(nèi)容酷誓，拖拉一個(gè)圖像，250*250态坦，然后可以進(jìn)行導(dǎo)入圖像操作了盐数，在中繼器的空白行上右鍵選擇導(dǎo)入圖像操作，將喜歡的圖片導(dǎo)入進(jìn)來伞梯。
? ? ? ? ?圖像導(dǎo)入成功后玫氢，設(shè)置中繼器的每項(xiàng)加載時(shí)事件：設(shè)置圖像。讓導(dǎo)入的圖像在界面上顯示谜诫。
? ? ? ?這里還有個(gè)問題漾峡，想讓圖片整體處在頁面的什么位置，想一排顯示幾張喻旷，這些設(shè)置都在中繼器的樣式設(shè)置這邊完成生逸。例如這里設(shè)置y=50，則圖像整體距離頂部50，布局為橫向槽袄，勾選換行烙无，每row項(xiàng)數(shù)為5（每行五張圖）。圖像整體內(nèi)容處于頁面的居中還是靠左位置掰伸，由頁面樣式里的頁面對齊控制皱炉，這里就不截圖展示了，大家應(yīng)該都知道吧~
2.雙擊中繼器狮鸭，添加圖像上方的操作欄合搅，可以對圖標(biāo)添加交互樣式以及工具提示(喜歡、下載)歧蕉。選擇組合灾部，然后勾選隱藏。
3.拖拉一個(gè)動(dòng)態(tài)面板惯退，命名為大圖赌髓，固定到瀏覽器窗口，橫向固定選擇左側(cè)催跪。在樣式里锁蠕，導(dǎo)入一張圖片，作為之后點(diǎn)擊照片墻上的一張圖懊蒸，顯示的大圖荣倾。設(shè)置適合的長寬，勾選隱藏骑丸。選擇拉伸以覆蓋的圖片顯示方式舌仍。
4.拖動(dòng)一個(gè)動(dòng)態(tài)面板，命名為更多操作通危，可以將操作里的內(nèi)容復(fù)制過來铸豁，然后再增加一個(gè)關(guān)閉的圖標(biāo)。
5.設(shè)置對圖像進(jìn)行鼠標(biāo)單擊菊碟、鼠標(biāo)移入以及鼠標(biāo)移出的交互效果节芥。
? ? ?這里的交互是為了實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊圖像，圖像全屏顯示效果框沟。
? ? ? 到這里藏古，動(dòng)態(tài)圖片墻就完成了，第一次寫教程忍燥，不知道這樣的套路拧晕，對么。如果不對梅垄，歡迎大家指正厂捞。
