一個簡單的JS鼠標懸停特效具體方法
更新時間：2013年06月17日 09:35:48 作者：
這個特效最終實現(xiàn)效果就是當鼠標移動到鏈接上，文字會橫向移動一定距離，貌似總有人喜歡這些花花草草。添加此效果方法很簡單。
首先，需加載jquery庫（略過）。
其次，將下面 Javascript代碼加到頁面的頭部：
<script type='text/javascript'>
jQuery(document).ready(function($){
$('a').hover(function()
{
$(this).stop().animate({'left': '5px'}, 'fast');
}, function() {
$(this).stop().animate({'left': '0px'}, 'fast');
});
});
</script>
第三，在樣式中加入：
a {position:relative}
完成。
簡單定義下a:hover樣式，貌似更簡單：
a:hover { padding: 0 0 0 8px;}
只是不夠自然而已。
其次，將下面 Javascript代碼加到頁面的頭部：
復制代碼 代碼如下:
<script type='text/javascript'>
jQuery(document).ready(function($){
$('a').hover(function()
{
$(this).stop().animate({'left': '5px'}, 'fast');
}, function() {
$(this).stop().animate({'left': '0px'}, 'fast');
});
});
</script>
第三，在樣式中加入：
復制代碼 代碼如下:
a {position:relative}
完成。
簡單定義下a:hover樣式，貌似更簡單：
復制代碼 代碼如下:
a:hover { padding: 0 0 0 8px;}
只是不夠自然而已。
相關文章
一篇文章弄懂javascript中的執(zhí)行棧與執(zhí)行上下文
這篇文章主要給大家介紹了關于javascript中執(zhí)行棧與執(zhí)行上下文的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用javascript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-08-08
這篇文章主要介紹了對于防止按鈕重復點擊的嘗試，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了基于打包工具Webpack進行項目開發(fā)實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了在js中如何準確的判斷一個變量的類型，文中代碼非常詳細，幫助大家更好的學習，有興趣的朋友可以了解下2020-06-06
html讀出文本文件內(nèi)容...2007-01-01
微信小程序內(nèi)拖動圖片實現(xiàn)移動、放大、旋轉的方法
這篇文章主要介紹了微信小程序內(nèi)拖動圖片實現(xiàn)移動、放大、旋轉的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了詳解微信小程序「渲染層網(wǎng)絡層錯誤」的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-01-01
用JavaScript 判斷用戶使用的是 IE6 還是 IE7
判斷IE瀏覽器的腳本，方便根據(jù)瀏覽器不懂，支持不同的代碼的分別調用。2008-01-01
JavaScript 數(shù)組展平方法: flat() 和 flatMap()詳解
從 ES2019 中開始引入了一種扁平化數(shù)組的新方法，可以展平任何深度的數(shù)組，這篇文章主要介紹了JavaScript 數(shù)組展平方法: flat() 和 flatMap()詳解,需要的朋友可以參考下2023-06-06
以前最短的IE判定借助于IE不支持垂直制表符的特性搞出來的。2011-03-03