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


沒有留言:

張貼留言