標籤:jQuery

[教學]使用jQuery和CSS去除超連結虛線

在瀏覽器預設狀況下,當您點了超連結之後,外框會自動出現虛線,因為這跟瀏覽器的focus焦點有關,可是在網頁的整體版面配置規劃與呈現上,這樣的虛線會影響整體美觀,這時候我們可以透過CSS來去除這個超連結外框,讓網頁版面配置上可以比較美觀,如果使用CSS調整失敗的話,也可以透過jQuery進行超連結去除,以達到美化效果。

這個虛線框是屬於a屬性的擬類別「:focus」,這東西規範於CSS2,讓所有超連結點到之後可以顯示其虛線外框,但這個虛線外框並不影響網頁的位置計算排版,簡單說可以想像他是浮在上面的,就算出現虛線外框也不會讓網頁版面位移,但這個做法只是讓網頁看起來比較不好看,多了一個外框虛線總覺得有點怪怪,所以就讓我們來去除虛線吧!

Dynamic To Top 右下角點一下,自動滑到網頁頂端

如果網頁太長,當到網頁最底端時,想要回到最頂端用滑鼠滾輪可能滾到快暈倒,香腸的解決方式常會使用鍵盤上的「Home」鍵,快速回到網頁最頂端,會這樣做是因為該網站沒有提供按鈕可以供使用者快速回到網頁最定端。常見的GO Top作法應該就是在網頁底端加入一個超連結,對應CSS,點一下就可以回到指定的位置,但是這樣的呈現方式就很單純的瞬間跳到最上面,十分的普通。

如果想要讓使用者在網站上有更多的體驗,可以試試看jQuery的相關套件,在WordPress的外掛中有個外掛叫做「Dynamic To Top」就是基於jQuery的所開發的外掛,並且提供後臺設定介面可以讓使用者透過直覺的網頁設定調整回到最頂端的按鈕呈現樣式,以及滑動的特效,讓訪客在瀏覽上更方便,透過右下角一個小小的按鈕,點一下就會以滑動的方式回到網頁最頂端哦!

jQuery Cycle Plugin 網頁圖片輪播特效

想要讓網站有圖片輪播的特效很困難嗎?還要使用Flash才能做到嗎?現在不必了,只要利用JQuery並搭配幾張圖片,就可以達到我們所需的特效囉!在jQuery中,有個Plugin叫做「jQuery Cycle Plugin」,專們用來處理圖片輪播特效的外掛,使用方式非常的簡單,而且跑起來也蠻順暢的,也不必擔心使用者電腦如果沒有flash播放器,造成特效失敗的問題。

很多網站逐漸透過jQuery來取代Flash的一些特效,再加上現在HTML5是趨勢,很多東西都是透過JS並搭配HTML5來時做的,大家或許會擔心瀏覽器對Javascript處理的效能,別擔心,現在各家瀏覽器的開發重點大多著重在Javascript的處理效能上,所以在網站跑JS不會再跟以前一樣非常的吃電腦資源了,而且速度也快很多呢!

Lazy Load 延遲圖片載入,讓網站更順暢

當一個網站圖片越多,開啟的速度也會越慢,因為網頁的讀取是由上到下,當遇到了圖片時,讀取速度上絕不會像讀取圖片一樣順暢,常常因為圖片而延遲到網站的開啟速度,對於圖多的網站真的是吃了悶虧。那是否有辦法改善這種因為圖片而造成網站開啟太慢的問題呢?

事實上,我們可以透過JQuery的一個外掛「Lazy Load」來達成,當這外掛啟用後,遇到圖片時,他會先跳過,先上網頁上其它的東西優先載入,當其它的網頁物件載入完後,再換圖片進行載入,這樣就不會因為圖片的關係而讓網頁卡在圖片讀取,讓讀者閱讀上可以更順暢。

GShine V1.0 新佈景、新配色,全新上架!

久違的新文章終於在昨天偷偷發文了,這半個月來香腸一直瞞著魷魚絲偷偷的在寫佈景、調佈景。經過上次的iNove大翻修,這回我們帶來了新配色以及新的網頁效果,讓各個瀏覽器瀏覽香腸炒魷魚時,效果差異變小,這次也盡可能的減少圖片與外掛用量,讓網站整體速度可以更快、效果可以更炫。