[jQuery Plugin] seekAttention 製作閃爍的焦點效果

分類: jQuery|技術分享 作者: daniel

31 3 月 2009

demo

原始網站:http://enhance.qd-creative.co.uk/demo/seekAttention/

閃爍的東西總是吸引人注意,在製作網站的過程中,也常常會碰到需要特別吸引使用者注意的地方;以往必須依賴 Flash 才能做到的閃爍的焦點效果,現在 jQuery 就能幫你輕鬆實現囉!seekAttention 提供類似 blockUI 的半透明遮罩,在需要引起使用者注意的元素上呈現閃爍的效果;同時只要經由簡單的參數設定,就能改變閃爍區塊的大小、遮罩的區域,甚至是顏色的切換。

使用的方式非常簡單,一開始先設計一個 HTML 表單元件:

<form action="" id="testForm">
    <input type="text" id="name" name="name" /><br />
    <input type="text" id="email" name="email" /><br />
    <input type="button" id="testFormSubmit" name="testFormSubmit" value="送出" />
</form>

接下來載入 jQuery 以及 seekAttention:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="seekAttention.jquery.js"></script>

然後插入 JavaScript:

<script type="text/javascript">
$(function () {
 
    $('#testFormSubmit').click(function () {
 
        // 移除錯誤說明
        $('span.note').remove();
 
        // 電子郵件驗證
        if (0 < $.trim($('input#email').val()).length) {
            var checkEmail = $('input#email').val();
            var emailPattern = /^[a-z0-9](([_\.\-]?[a-z0-9]+)*)@([a-z0-9]+)(([\.\-]?[a-z0-9]+)*)\.([a-z]{2,})$/i;
            if (!emailPattern.test(checkEmail)) {
                $('input#email').after('<span class="note">電子郵件格式錯誤</span>').seekAttention();
            }
        } else {
            $('input#email').after('<span class="note">請輸入電子郵件</span>').seekAttention();
        }
 
    });
 
});
</script>

呈現的效果如下:

seekattention 測試表單效果

seekattention 測試表單效果

範例程式下載

其他其實還有很多效果可以設定,範例只用了最基本的效果;有興趣的人可以參考網站中 Demo 的部分。

雖然閃爍的效果很棒,不過這個 Plugin 有個缺點:僅能對單一元素作處理。如果同時有多個元素要呈現閃爍的效果,它只會對最後一個元素作處理,算是美中不足的地方囉~

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。