jquery實(shí)現(xiàn)盒子下拉效果示例代碼
更新時(shí)間：2013年09月12日 17:27:28 作者：
當(dāng)把鼠標(biāo)移動(dòng)到盒子上的時(shí)候上面就會(huì)出現(xiàn)一個(gè)黑色的盒子,這是在瀏覽網(wǎng)頁(yè)的時(shí)候看到的一個(gè)效果，具體實(shí)現(xiàn)如下，感興趣的朋友可以了解下
復(fù)制代碼 代碼如下:
<script src="js/Jquery1.7.js"></script>
<script type="text/javascript">
$(function () {
$('div:eq(1)').css({ 'margin-top': '-=100px' });
$('div:first').mouseover(function () {
$('div:eq(1)').animate({'margin-top':'+=100px'});
})
$('div:first').mouseout(function () {
$('div:eq(1)').animate({ 'margin-top': '-=100px' });
})
</script>
復(fù)制代碼 代碼如下:
<pre name="code" class="html"><div style="width:600px;height:300px;overflow:hidden;">
<div style="background-color:#000;height:100px;">
</div>
<div style="background-color:#eee;height:300px;">
</div>
</div></pre><br>
<pre></pre>
<pre name="code" class="html"></pre><pre name="code" class="html">當(dāng)把鼠標(biāo)移動(dòng)到盒子上的時(shí)候上面就會(huì)出現(xiàn)一個(gè)黑色的盒子</pre><pre name="code" class="html">這是在瀏覽網(wǎng)頁(yè)的時(shí)候看到的一個(gè)效果</pre><pre name="code" class="html">在這里寫(xiě)了一下</pre>
相關(guān)文章
jQuery 常見(jiàn)操作實(shí)現(xiàn)方式和常用函數(shù)方法總結(jié)
一個(gè)優(yōu)秀的 JavaScript 框架，一篇 jQuery 常用方法及函數(shù)的文章留存?zhèn)渫?/div> 2011-05-05
jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果簡(jiǎn)單示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果,結(jié)合實(shí)例形式分析了jQuery上傳圖片本地預(yù)覽所涉及的相關(guān)頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03
jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法,實(shí)例分析了jQuery通過(guò)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素切換的動(dòng)畫(huà)效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
密碼強(qiáng)度驗(yàn)證的方式有很多，今天給大家推薦一個(gè)通過(guò)JQuery實(shí)現(xiàn)的密碼強(qiáng)度驗(yàn)證控件，只需要很少的代碼便能實(shí)現(xiàn)。2010-03-03
利用jQuery來(lái)動(dòng)態(tài)為屬性添加或者刪除屬性的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇利用jQuery來(lái)動(dòng)態(tài)為屬性添加或者刪除屬性的簡(jiǎn)單方法。小編覺(jué)的挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-12-12
騰訊與新浪的通過(guò)IP地址獲取當(dāng)前地理位置（省份）的接口
通過(guò)IP地址獲取當(dāng)前地理位置（省份）的接口，方便大家可以直接使用結(jié)合自己的系統(tǒng)。2010-07-07
jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn)
這篇文章主要介紹了jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn)，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-06-06
jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片輪播和滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
作為jquery異步請(qǐng)求的傳輸對(duì)象，jquery請(qǐng)求后返回的結(jié)果是json對(duì)象,這里考慮的都是服務(wù)器返回JSON形式的字符串的形式2014-03-03
jquery根據(jù)name取得select選中的值實(shí)例(超簡(jiǎn)單)
下面小編就為大家分享一篇jquery根據(jù)name取得select選中的值實(shí)例(超簡(jiǎn)單)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01最新評(píng)論