在網頁應用中，鼠標操作是最為常見和頻繁的操作，在用戶移動鼠標瀏覽頁面的時候，一些交互特效的提醒會增強用戶體驗度，也可讓用戶感覺頁面在和他“交流”，從而增加用戶在頁面的逗留時間，以及增加深層次訪問的可能性。
今天tity帶大家做一個簡單的示例，當鼠標移動到圖片上的時候圖片會向上動一下，等到鼠標離開后，圖片又返回到原來的位置。
首先，我們先來做如下圖所示的頁面布局：
頁面布局部分：
<ul> <li><img src="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li></ul>
樣式部分：
<style type="text/css"> ul,li { display: block; margin: 0; padding: 0; list-style: none; } ul { width: 800px; height: 210px; border: 1px solid #333; margin: 100px auto; padding: 0 5px; } li { position: relative; float: left; width: 190px; height: 190px; margin: 10px 5px; } img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; }</style>這里我們需要引入jQuery插件庫，建議大家盡量使用jQuery，因為很多插件都是基于jQuery開發的。
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
動畫功能的實現，主要是使用jQuery中提供的hover方法，該方法的語法為：
$('demo').hover(function(){},function(){});
這里hover方法可以接收兩個參數，第一個參數對應的方法表示鼠標移入時候的方法，第二個方法表示鼠標移出時候的方法。
示例對應的JS部分為：
<script type="text/javascript"> $(function(){ $('img').hover(function(){ $(this).animate({ 'top' : '-10px' },'normal'); },function(){ $(this).animate({ 'top' : '0px' },'normal'); }); })</script>這里是通過animate這個方法來實現圖片的移動的，配合CSS中的定位，在鼠標移入的時候圖片向上移動了10像素，當鼠標移出的時候圖片又恢復到了原來的位置。
以上示例僅僅是一個簡單的使用說明，更多的特效在animate方法中展開書寫即可。同時除了動畫之外還可以做文字的顯示隱藏、圖片的替換等等。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
