1. 程式人生 > >33.元件屬性的使用(三)

33.元件屬性的使用(三)

ron alt 新的 比例 默認 不能 ima 點擊圖片 span

現在做放大圖的效果:

技術分享圖片首先在右邊添加一個動態面板跟一個圖片 動態面板尺寸為400 跟之前圖片尺寸一樣 新添加的圖片的尺寸為1000 因為這個比例就是之前圖片(400)/小矩形(160)的比例

技術分享圖片這樣我們的比例就是相同的

思路:當左邊小矩形往右邊移動的時候 右邊的大圖往左邊移動才能讓面板顯示對應的內容(我也好奇為什麽不能設置面板跟隨小矩形同比例的移動)

技術分享圖片然後我們將大圖剪切到面板裏去 設置位置為x=0 y=0

下面我們設置當鼠標在大矩形框裏的時候同時顯示小矩形跟面板 移出的時候就不顯示的動作:

技術分享圖片設置之前大矩形鼠標移入時顯示小矩形以及動態面板

技術分享圖片設置鼠標移出時隱藏小矩形跟面板

技術分享圖片給小矩形添加一個移動時的動作 這是一個新的時間 意思是當移動小矩形的時候執行的動作就是移動那個新添加的圖片

技術分享圖片移動大矩形時對X的公式操作 意思就是由小矩形的左邊界減去大矩形的左邊界得到小矩形移動的距離 然後乘以2.5得到新加大圖的移動距離 2.5是倍數 同時由於大圖是負距離移動 因此可以用大矩形邊界減去小矩形邊界得到一個負數距離

技術分享圖片同理

技術分享圖片因為一開始不能讓面板顯示內容 因此可以將面板先隱藏

下面我們要在下面做一個圖片切換的效果:

技術分享圖片在下方添加一個中繼器 然後進入中繼器刪掉裏面的矩形改成圖片 圖片尺寸為60X60

技術分享圖片然後添加數據 導入圖片

技術分享圖片技術分享圖片然後我們將中繼器項目交互之前每項載入時的設置文本改為設置圖片 這樣才會把數據加載

技術分享圖片樣式改為水平

技術分享圖片每列加上間距

技術分享圖片然後給中繼器設置動作 當點擊圖片的時候設置圖片 註意其中大圖片為400尺寸 放大圖為1000的尺寸

技術分享圖片同時我們要設置一個默認的 利用中繼器中項目交互中的每項載入時 加入條件 如果第一列等於1的話

技術分享圖片同時改elseif為if

33.元件屬性的使用(三)