*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2015年3月20日 星期五

移動滑鼠放大照片;image zoom



移動滑鼠放大照片 ZOOM

←請把滑鼠移到照片。


一、請複製下列 jQuery 語法至<body>後:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
src="http://lmcdwriting.org/userfiles/lmcsilver20121007/elevatezoom-master/jquery.elevateZoom-3.0.8.min.js"></script>
二、請複製下列驅動語法至<body>後:
<script>
$(function() {
$("#zoom_01").elevateZoom({
zoomWindowWidth:260,
zoomWindowHeight:180 });
});
</script>
三、請把html碼放到欲編輯之處:
<img id="zoom_01"
src="小照片網址"
data-zoom-image="大照片網址">

注意事項:

1.步驟二紅色字體者,是要放大照片的視窗大小。
2. 此範例只能有一個互動功能,如要做第二個,請重覆步驟二,並更改步驟二、三的 id 代碼(綠色字體者)。


影音教學:


語法出處:http://www.elevateweb.co.uk/image-zoom/examples


沒有留言:

張貼留言