插件需求 : jQuery & jQuery UI
相容性 : All Modern Browsers
官方網站 : http://ipicture.justmybit.com/
下載點 : http://ipicture.justmybit.com/download.php
簡介
jQuery iPicture 是一款讓我們能夠在網頁圖片上標註anchor或tooltip的插件,當滑鼠移過去就會顯示一些說明的文字,這個插件最厲害之處在它可以切換編輯模式(modify mode),這樣可省去動手算圖的座標的動作。說麼多或許很難理解,馬上觀看下面兩個範例吧!!正常模式
DEMO網址 : http://ipicture.justmybit.com/index.php
編輯模式
切換編輯模式非常的簡單,只要將modify參數設為true就會以編輯模式開啟,相反的false就會正常模式顯示。
DEMO網址 : http://ipicture.justmybit.com/options/modify.php
程式碼
$( "#iPicture" ).iPicture({
animation: true,
animationBg: "bgblack",
animationType: "ltr-slide",
pictures: ["picture1"],
button: "moreblack",
moreInfos:{"picture1":[{"id":"tooltip1","descr":"語文學習中心","top":"119px","left":"428px"},..}]},
// 開啟/關閉編輯模式
//modify: true,
initialize: false
});
這種ToolTip在網站的導覽以及商品買賣的網站上會十分的有用處,這種臨場感是經典方格子拍賣無法呈現的。
如果你有更好的應用,歡迎在下面留言討論
沒有留言:
張貼留言