分類彙整:JavaScript 程式設計

jQuery 入門教學 – 使用 attr() 抓取圖片的屬性以及改變圖片的路徑

jQuery attr() 練習

在 JavaScript 語法中,可以使用 document.getElementById(“MYIMG”).src 來抓取圖片的 src 路徑,然後改變圖片的 src 路徑,就可以製作出在網頁上變換圖片的功能。 到了 jQuery 語法,就改成了使用 $(“#MYIMG”).attr(“src”); 這個方法來抓取圖片的 src 路徑… 繼續閱讀

in JavaScript 程式設計

jQuery Animate 基本動畫練習 – 動態按鈕

jQuery animate Buttons

當我們使用滑鼠觸摸到一個物件的時候,在 jQuery 語法可以使用 $(this) 指令來讓這個物件做出動畫效果,這一篇教學範例,我們要再加上 next() 指定下一個兄弟物件,還有 prev() 指定前一個兄弟物件,就可以讓前後的兩個物件也一起同時做出動畫 繼續閱讀

in JavaScript 程式設計

jQuery Animate 動畫練習 – 滑動式彩帶按鈕

jQuery Animate 動畫練習 - 滑動式彩帶按鈕

這一個範例要讓同學來練習使用 jQuery 的 animate() 指令,設計製作動態滑動的按鈕,由於 jQuery 的 animate() 指令是借用 CSS 的語法來設定動畫效果,將原本靜態的網頁,變成具有動畫效果的呈現,所以在學習 jQuery 之前必須要先對 CSS 網頁排版熟悉,才能自由發揮出 jQuery 的各種動態功能… 繼續閱讀

in JavaScript 程式設計

Javascript 輪播式廣告

01

早期網路上常見的輪播式廣告大多是由 Flash 所完成,但近年來行動裝置的盛行再加上 IOS 不支援 Flash 以及 SEO 極差的情況下,網頁設計師紛紛向 Javascript 、 jQuery 來朝聖。用 Javascript 、 jQuery 來動畫製作效果不僅能排除前面所敘述的問題,更能相容於各家的瀏覽器。 繼續閱讀

in JavaScript 程式設計

jQuery 教學 – 動態廣告輪播 – 仿 Yahoo 切換式 N 格圖片廣告

用 jQuery 做動態廣告輪播

還記得筆者曾經寫過一篇仿 Yahoo 切換式兩格圖片廣告嗎?因為原本只是針對一次兩格來做效果,所以就有蠻多網友問說怎樣一次顯示超過兩格呢?剛好趁著 Yahoo! 奇摩新聞原本的效果也因為改版而有一點點不同 繼續閱讀

in JavaScript 程式設計

22歲的天才John Resing寫出的jQuery 程式庫

22歲的天才John Resing寫出的jQuery 程式庫

曾幾何時3C 產品變成時尚的代表,一支iPhone、iPad 拿在手上,整個人都變潮了,精神多了! 以往被視為宅到不行的程式設計師,現在也開始追求如何優雅地寫程式,將原本需要寫到數十行的程式碼,改變成只要用2~3行就解決 繼續閱讀

in JavaScript 程式設計