這款JS鼠標(biāo)滑動(dòng)效果使用jQuery實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫的方法，而且也驚喜的發(fā)現(xiàn)，jquery有更好的書寫方法，可以連寫，在animate方法前加上stop方法就可實(shí)現(xiàn)鼠標(biāo)移出后，不再執(zhí)行滑動(dòng)效果。

復(fù)制代碼代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>非常不錯(cuò)的jQuery鼠標(biāo)滑動(dòng)效果</title>

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

<style>

body{font-size:12px;font-family:Tahoma,Arial,Verdana;color:#fff; background:#000; width:100%; height:100%;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td ,i{padding:0;margin:0}

fieldset,img {border:0}

.clear{ clear:both;}

address,caption,cite,code,dfn,em,th,var {font-weight:normal;font-style:normal}

ol,ul {list-style:none}

caption,th {text-align:left}

h1,h2,h3,h4,h5,h6 {font-size:100%}

abbr,acronym,img {border:0}

button,input,select,textarea{font-size:100%;}

input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}

table {border-collapse:collapse;border-spacing:0;}

a{text-decoration:none;}

a:hover {text-decoration:underline;}

.clearfix:after {visibility: hidden;display: block;font-size: 0;content: ".";clear:both;}

.all ul{ width:100%; text-align:center;}

.all ul li{ width:100%; height:40px; line-height:40px; border-bottom:1px dashed #990066; cursor:pointer;}

</style>

</head>

<body>

<div class="all">

<ul>

<li>第一項(xiàng)</li>

<li>第二項(xiàng)</li>

<li>第三項(xiàng)</li>

</ul>

</div>

<script type="text/javascript">

$(document).ready(function(){

$('.all ul li').mouseover(function(){

$(this).animate({"height":"70px","line-height":"70px"},100)

}).mouseleave(function(){

$(this).stop().animate({"height":"40px","line-height":"40px"},100)

});

})

</script>

</body>

</html>

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)鼠標(biāo)選文字發(fā)新浪微博的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)選文字發(fā)新浪微博的方法,涉及jQuery鼠標(biāo)事件的響應(yīng)及新浪接口的調(diào)用技巧,非常簡(jiǎn)單實(shí)用的功能,需要的朋友可以參考下
2016-04-04
jQuery實(shí)現(xiàn)用戶輸入自動(dòng)完成功能
本文介紹了jQuery實(shí)現(xiàn)用戶輸入自動(dòng)完成功能的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
jquery實(shí)現(xiàn)的讓超出顯示范圍外的導(dǎo)航自動(dòng)固定屏幕最頂上
經(jīng)常會(huì)遇到這樣的情況，當(dāng)頁(yè)面展示內(nèi)容過(guò)長(zhǎng)時(shí)，想點(diǎn)導(dǎo)航切換欄目，就得把滾動(dòng)條拉回到頂上，這樣操作總不太人性化，能不能讓導(dǎo)航超出顯示范圍外時(shí)自動(dòng)貼在屏幕最頂上呢？答案肯定是能的。如果不太明白，把滾動(dòng)條拉到下面點(diǎn)，看下我博客是效果就明白了。
2011-09-09
Jquery判斷form表單數(shù)據(jù)是否變化
這篇文章主要為大家詳細(xì)介紹了Jquery判斷form表單數(shù)據(jù)是否變化的方法，感興趣的小伙伴們可以參考一下
2016-03-03
jQuery的.live()和.die() 使用介紹
很多開(kāi)發(fā)者都知道jQuery的.live()方法，他們大部分知道這個(gè)函數(shù)做什么，但是并不知道是怎么實(shí)現(xiàn)的，所以用的并不那么舒適。而且他們卻從未聽(tīng)過(guò)還有解除綁定的.live()事件的.die()方法。即使你熟悉這些，但是你意識(shí)到.die()了嗎？
2011-09-09
jQuery操作iframe中js函數(shù)的方法小結(jié)
這篇文章主要介紹了jQuery操作iframe中js函數(shù)的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery操作iframe中的元素、函數(shù)常用方法與注意事項(xiàng),具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-07-07
jquery ztree實(shí)現(xiàn)樹(shù)的搜索功能
這篇文章主要為大家詳細(xì)介紹了jquery ztree實(shí)現(xiàn)樹(shù)的搜索功能，zTree是利用 JQuery 的核心代碼，實(shí)現(xiàn)一套能完成大部分常用功能的Tree插件，對(duì)ztree感興趣的小伙伴們可以參考一下
2016-02-02
用Jquery.load載入頁(yè)面后樣式?jīng)]了頁(yè)面混亂的解決方法
一直想用jquery.load的方法載入新的頁(yè)面，以實(shí)現(xiàn)局部刷新，結(jié)果發(fā)現(xiàn)樣式?jīng)]了，后來(lái)發(fā)現(xiàn)了解決方法，如果不過(guò)濾掉一些內(nèi)容的話，直接加載，會(huì)使頁(yè)面混亂的
2014-10-10
使用jQuery ajaxupload插件實(shí)現(xiàn)無(wú)刷新上傳文件
項(xiàng)目中會(huì)經(jīng)常用到AJAX無(wú)刷新上傳圖片，但是iframe上傳和flash插件都是比較復(fù)雜的，所以就找了一個(gè)jquery的插件。下面通過(guò)實(shí)例代碼給大家介紹使用jQuery ajaxupload插件實(shí)現(xiàn)無(wú)刷新上傳文件功能，需要的朋友參考下吧
2017-04-04
jQuery實(shí)現(xiàn)彈出層效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)彈出層效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12