2012年4月5日

jQuery iPicture Plugin




jQuery iPicture Plugin

插件需求 : 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在網站的導覽以及商品買賣的網站上會十分的有用處,這種臨場感是經典方格子拍賣無法呈現的。


如果你有更好的應用,歡迎在下面留言討論

沒有留言:

ShareThis