哇寶部落格
Wabow Information Inc. Blog
sample
來源網站
http://cherne.net/brian/resources/jquery.hoverIntent.html
緣起
在jQuery中的原始hover用法中(註 :hover代表滑鼠游標滑過)，
並沒有辦法加上delay(延遲)的設定，
jQuery Plugin的hoverIntent可以加上delay的設定，讓滑鼠移動的效果增加更多的變化。
讓我們來看看用法吧!
hoverIntent
1.載入js
1 2 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.hoverIntent.js"></script> |
2.jQuery code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("#demo3 li").hoverIntent({ sensitivity: 3, //滑鼠滑動的敏感度,最少要設定為1 interval: 200, //滑鼠滑過後要延遲的秒數 over: makeTall, //滑鼠滑過要執行的函式 timeout: 500, //滑鼠滑出前要延遲的秒數 out: makeShort //滑鼠滑出要執行的函式 }); function makeTall(){ $(this).animate({"height":75},200);} function makeShort(){ $(this).animate({"height":50},200);} </script> |
3.html code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <style type="text/css" media="screen"> #RESOURCES #main .demo li { padding-bottom: 0; } ul.demo {display:block; width:100%; height:75px; padding:0; margin:0; background:#9cc; list-style-type:none;} ul.demo li {background:#fcc; display:block; width:25%; height:50px; padding:0; margin:0; float: left; position:relative; overflow:hidden; cursor:default; font-size:0.9em; line-height:1.1em;} ul.demo li.p2 {background:#ffc;} ul.demo li.p3 {background:#cfc;} ul.demo li.p4 {background:#ccf;} ul.demo li span { display:block; margin:4px; background:#eef; cursor:default;} </style> <ul class="demo" id="demo3"> <li class="p1"> </li> <li class="p2"> </li> <li class="p3"> </li> <li class="p4"> </li> </ul> |
結論
在網站前台的設計上，常會用到各種方式來呈現這個網站提供的功能大項及次項。
滑鼠點選或是滑過大項，下方彈出或是滑出次項就是其中的一種方式。
而以jQuery原本提供的hover用法在功能上比較簡單，
hoverIntent則額外提供了delay(延遲)的設定，
讓單純滑鼠滑過後的變化更多。
- Tags: jQuery