顯示具有 jQuery 標籤的文章。 顯示所有文章
顯示具有 jQuery 標籤的文章。 顯示所有文章

2015年7月24日

跨瀏覽器套版列印：根據不同的瀏覽器載入不同的CSS

      , , , , ,  
圖片來源：browserwork
最近因為螢幕尺寸越來越多元，網頁設計師不只要處理大家螢幕尺寸不同，網頁呈現要根據螢幕尺寸加以調整的問題（可參考：基本RWD版型設計），更進一步的，現在連瀏覽器的選擇都很多種，
Read More

2015年4月29日

2015年4月27日

2015年4月26日

2015年4月20日

jQuery學習筆記 第八堂-2（單頁式網頁設計：mousewheel功能）

      , , ,  

前陣子可以看到許多單頁式網頁的設計，單頁式網頁就是在一頁裡面把所有要傳達的訊息都傳達完，而網友可以透過捲動捲軸的方式，讓網頁產生類似輪撥的效果。

本堂課主要是延續上一篇jQuery學習筆記 第八堂-1，這次加入了mousewheel的效果後，可以產生一次轉動一頁的效果，點這裡看結果。。
Read More

2015年4月19日

[教學] jQuery學習筆記 第八堂-1（單頁式網頁設計：浮動導覽列垂直置中）

      , , , ,  

前陣子可以看到許多單頁式網頁的設計，單頁式網頁就是在一頁裡面把所有要傳達的訊息都傳達完，而網友可以透過捲動捲軸的方式，讓網頁產生類似輪撥的效果。

本堂課完成的結果就像這樣。
Read More

2015年4月12日

[筆記] 計算網頁底部位置，當網頁達到底部時才產生效果─jQuery

      , ,  

有時候，在寫jQuery的時候，我們會希望有些效果是當網友卷到網頁底部時才產生，例如像是有些網頁提供「向下鍵」讓網友點選，可是當到了頁底的時候，我們希望這個向下鍵能夠消失，到底要怎麼樣計算網頁底部的位置來達到這樣的效果呢？

Read More

2015年4月2日

2015年3月25日

2015年3月20日

2015年3月18日

[教學] jQuery學習筆記 第五堂（製作最流行的圖片輪撥效果：淡入淡出效果、自動輪撥功能、輪撥停止設定、）

      , , ,  

在第五堂課當中，我們要學習製作目前最流行的圖片輪撥方式，不同於以往透過gif的動畫呈現一張又一張的廣告，現在最常見的是在圖片的下方會出現許多的「點點」，讓你可以去選你想要看的圖片，當你不選的時候，則會自動輪轉。

這堂課中，我們會學習到許多不同的語法，像是：淡入淡出fade、位置移動position、指標修改cursor、屬性修改attr、時區設立setInterval、取消時區clearInterval、滑鼠進入mouseover、滑鼠移出mouseout。

製作出來的結果就像這樣子。
Read More

2015年3月9日

[教學] jQuery學習筆記 第四堂（hover語法：滑鼠移過表格時，該列產生不同格式色彩或字體）

      , , , , ,  

在閱讀網頁表格的時候，如果表格太多，瀏覽網頁的人常會無法對齊，不知道自己現在看的是哪一列，這時候，有一個作法是把奇數列和偶數列用不同的底色呈現，就像我們在上一堂課所教的，可參考：jQuery學習筆記 第二堂。

另一種辦法是我們這裡要用的，我們想要讓滑鼠移到某一列的時候（完成結果），那一列的底色就會變色，讓我們看看要怎麼做吧！

Read More

2015年3月8日

[教學] jQuery學習筆記 第二堂（表格建立、表格中套色，奇偶列不同色）

      , , , , ,  


第二堂課中，主要的學習表格的建立，將每一表格套用同樣底色或是根據奇偶數列有不同的底色，這堂課中，我們會學習利用HTML、CSS和jQuery的不同方式來達到這樣的效果。

結果就像這樣：結果一、結果二。

Read More

2015年3月7日

[筆記] jQuery學習筆記 第一堂（軟體安裝、文字格式修改）

      , , , , ,  

最近從零開始，報名了台大計中的網頁設計課程，在這們的課中主要是學習jQuery的應用，但因為我們都還沒有任何網頁設計的底子，因此會先學習一些基本的HTML和CSS。

第一堂課中，主要的目標就是要安裝程式開發的基本軟體，另外學習基本的HTML和CSS語法。

完成的成果就像這樣子。
Read More