哇寶部落格
Wabow Information Inc. Blog
原始網站：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 測試表單效果
其他其實還有很多效果可以設定，範例只用了最基本的效果；有興趣的人可以參考網站中 Demo 的部分。
雖然閃爍的效果很棒，不過這個 Plugin 有個缺點：僅能對單一元素作處理。如果同時有多個元素要呈現閃爍的效果，它只會對最後一個元素作處理，算是美中不足的地方囉～
- Tags: jQuery