jQuery如何實現(xiàn)點擊替換圖片特效

這篇文章將為大家詳細講解有關jQuery如何實現(xiàn)點擊替換圖片特效，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　1，起因

　　最近在工作中要實現(xiàn)自定義式的radio樣式，而我們通常使用的時默認的樣式，因為自己實在想不到解決的方法，于是開始搜索，最終看到了不錯的解決辦法，可以完美解決我們遇到的問題。

　　2，原理

　　大家都知道在寫結構的時候，radio或checkbox都會跟隨label一起使用，label的for屬性值和input的id值相同的情況下，點擊label就可以選中input，這里正是利用label 來覆蓋我們的input默認樣式，通過給label添加背景圖片（美化的checkbox或radio），也就是在點擊的過程中，我們是看不到默認的input的（給input設置z-index:-1），而點擊的是label，通過不同的事件，加載不同的背景圖片（這里是改變背景圖片的位置）

　　3，設置美化checkbox或radio的默認樣式

　?。?）頁面結構

　　Which genres do you like?

　　Action / Adventure

　　Comedy

　　Epic / Historical

　　Science Fiction

　　Romance

　　Western

　　Caddyshack is the greatest movie of all time, right?

　　Totally

　　You must be kidding

　　What's Caddyshack?

　　（2）jquery code（前提必須引入jquery庫）

　　jQuery.fn.customInput=function（）{

　　$（this）。each（function（i）{

　　if（$（this）。is（'[type=checkbox],[type=radio]'））{

　　var input=$（this）;

　　//get the associated label using the input's id

　　var label=$（'label[for='+input.attr（'id'）+']'）;

　　//get type,for classname suffix

　　var inputType=（input.is（'[type=checkbox]'）） ? 'checkbox' : 'radio';

　　//wrap the input + label in a div

　　$（'

　　//find all inputs in this set using the shared name attribute

　　var allInputs=$（'input[name='+input.attr（'name'）+']'）;

　　//necessary for browsers that don't support the :hover pseudo class on labels

　　label.hover（function（）{

　　$（this）。addClass（'hover'）;

　　if（inputType=='checkbox' && input.is（':checked'）） {

　　$（this）。addClass（'checkedHover'）;

　　}

　　},function（）{

　　$（this）。removeClass（'hover checkedHover'）;

　　}）;

　　//bind custom event, trigger it, bind click,focus,blur events

　　input.bind（'updateState',function（）{

　　if（input.is（':checked'））{

　　if（input.is（':radio'））{

　　allInputs.each（function（）{

　　$（'label[for='+$（this）。attr（'id'）+']'）。removeClass（'checked'）;

　　}）;

　　};

　　label.addClass（'checked'）;

　　} else {

　　label.removeClass（'checked checkedHover checkedFocus'）;

　　}

　　}）

　　。trigger（'updateState'）

　　。click（function（）{

　　$（this）。trigger（'updateState'）;

　　}）

　　。focus（function（）{

　　label.addClass（'focus'）;

　　if（inputType=='checkbox' && input.is（':checked'）） {

　　$（this）。addClass（'checkedFocus'）;

　　}

　　}）

　　。blur（function（）{

　　label.removeClass（'focus checkedFocus'）;

　　}）;

　　}

　　}）;

　　}

　　引入jquery庫，再引入上面的代碼后，就可以執(zhí)行下面的代碼

　　$（'input'）。customInput（）;

　?。?）生成的外層div

　　如果你的代碼結構是label和input成對寫的話，那么在它們的外層就會生成一個div

關于“jQuery如何實現(xiàn)點擊替換圖片特效”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。