移動滑鼠放大照片 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
沒有留言:
張貼留言