滑鼠移入，就產生引起注意的動態效果
透過這樣的動態互動表現文本，可以使得圖像的意義呈現獲得了「更豐富」的緃深。「身體」的動作而來的互動意向性，使得圖像產生了以往的媒材所沒有的一種意義展現能力。 圖像，在其靜態的「視覺意義給出」之外，現在也可以「再更多」為讀者給出了其他的意義。
例如，下圖的互動，你不會只是看到「貓」這樣的文本意義，同時你也感受到了「貓在想著什麼」這樣的互動文本意含之呈現。
這是互動文本帶來的新的意義呈現方式。
〔請按下列的效果模式 ↓ 〕
搖動的效果；
跳躍的效果；
高亮的效果；。
跳躍的效果；
高亮的效果；。
教學影音：
構思：
先寫一個DIV，依續置入二張圖。
第二張圖使用position: absolute語法，移動下圖往上。
在DIV寫入「滑鼠移入後第二圖動作」的語法。
寫作程續
請先寫<head>xxx</head>中寫入外掛程式：
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
編輯內容的HTML語法：
<div id="ui20171226"
onmouseenter="$('.imgab20171225').effect('shake', { times: 3, distance: 12 }, 500);"
style="width: 560px; height: 420px;" class="divimgab20171225">
<img style="width: 560px; height: 420px;" alt=""
src="第一張圖網址"><br>
<img style="width: 120px; height: 120px;" class="imgab20171225" alt=""
src="第二張圖網址（在上面跳的）"><br>
</div>
編輯內容CSS 語法：
<style>
/*設定當定位點的DIV文字框之屬性，以四角可為原點*/
.divimgab20171225 {
position: relative;
}
/*第二張圖的absolute之位置，使用top, left, bottom, right*/
.imgab20171225 {
position: absolute;
top: 25px;
right: 150px;
}
</style>
滑鼠移入後的jQuery UI 語法
搖動效果：
onmouseenter=" $('.imgab20171225').effect('shake', { times: 3, distance: 12 }, 500); "
【說明】
- times: 3 這是指搖動次數，可以自行增減數字。
- distance: 12 這是搖動的距離，可以自行增減數字。
- 500 是指動作效果的時間，1000是1秒。
跳躍效果：
onmouseenter=" $('.imgab20171225').effect('bounce', { times: 5, distance: 15 }, 400); "
高亮效果：
onmouseenter=" $('.imgab20171225').effect('highlight', 800); "
補充：效果出現後再換圖
請 將滑鼠移入此處。
以搖動效果為例，語法：
滑鼠移入後，
onmouseenter=" $('.imgab20180105').effect('shake', { times: 3, distance: 12 }, 500).queue(function() {$('.imgab20180105' ).attr('src', '要換照片網址').dequeue();}); "
滑鼠移出後，
onmouseleave=" $('.imgab20180105').attr('src', '要換回原照片的網址'); "
說明：
滑鼠移入後搖動，最後再加上「換新圖」的語法（紅色字體）。
滑鼠移出後，又換回到原來的圖。
沒有留言:
張貼留言