jQuery實現(xiàn)DIV響應(yīng)鼠標(biāo)滑過由下向上展開效果示例【測試可用】
更新時間：2018年04月26日 14:21:33 作者：qq_36410795
這篇文章主要介紹了jQuery實現(xiàn)DIV響應(yīng)鼠標(biāo)滑過由下向上展開效果,涉及jQuery基于事件響應(yīng)結(jié)合stop與animate方法控制頁面元素屬性動態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)DIV響應(yīng)鼠標(biāo)滑過由下向上展開效果。分享給大家供大家參考，具體如下：
鼠標(biāo)浮動時div由下向上緩慢展開效果
1. 演示效果（鼠標(biāo)浮動時div由下向上展開，浮動后div由上向下折疊恢復(fù)原樣）
2. 代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>chabaoo.cn jQuery響應(yīng)鼠標(biāo)實現(xiàn)div由下向上展開</title>
<style type="text/css">
.big{position:relative; width:234px; height:300px; background:#ccc}
.show{position:absolute; display:none; bottom:0px;display:block; width:100%; height:auto; background:#f66 }
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".big").hover(function () {
$(".show").stop(true,true).animate({height:"70px"});
}, function () {
$(".show").stop(true,true).animate({height:"0px"});
});
});
</script>
</head>
<body>
<!--灰色的div-->
<div class="big">
<!--紅色的div-->
<div class="show"></div>
</div>
</body>
</html>
原理：
① 首先紅色div是通過position:absolute絕對定位的，且通過相對與底部定位，如bottom:0px。
② 底部定位固定，高度變高的時候就向上擴展了。
③ 使用jQuery的$().animate()動畫方法，控制紅色div高度變化。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery切換特效與技巧總結(jié)》、《jQuery動畫與特效用法總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
jQuery中ajax請求后臺返回json數(shù)據(jù)并渲染HTML的方法
今天小編就為大家分享一篇jQuery中ajax請求后臺返回json數(shù)據(jù)并渲染HTML的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
jQuery實現(xiàn)鼠標(biāo)滾動圖片延遲加載效果附源碼下載
本文給大家分享jquery技術(shù)實現(xiàn)圖片延時加載效果，本特效沒有使用專門的圖片延遲加載插件，只需要一小段jQuery代碼就實現(xiàn)了圖片延遲加載，使用非常方便，需要的朋友可以下載源碼2016-06-06
這篇文章主要介紹了jquery如何實現(xiàn)的一個簡單的彈出框，經(jīng)測試非常好用，代碼簡潔，留著以后工作時候再用2014-09-09
這篇文章主要介紹了jQuery根據(jù)元素值刪除數(shù)組元素的方法,涉及jQuery中splice及inArray方法的使用技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery 1.9.1源碼分析系列（十三）之位置大小操作的相關(guān)資料,需要的朋友可以參考下2015-12-12
jquery 導(dǎo)航條的效果，主要是針對css的控制。2010-05-05
jQuery動畫效果實現(xiàn)圖片無縫連續(xù)滾動
這篇文章主要為大家介紹了jQuery動畫效果實現(xiàn)圖片無縫連續(xù)滾動，實現(xiàn)類似連續(xù)不間斷的滾動廣告位，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
在web開發(fā)中,經(jīng)常會遇到需要在下拉框中進行搜索并進行模糊查詢的需求,jQuery是一個廣泛應(yīng)用于前端開發(fā)的JavaScript庫,可以幫助我們實現(xiàn)這樣的功能,本文將介紹如何使用jQuery實現(xiàn)下拉框搜索模糊查詢功能,需要的朋友可以參考下2024-09-09
jQuery CheckBox全選、全不選實現(xiàn)代碼小結(jié)
jQuery CheckBox全選、全不選實現(xiàn)代碼小結(jié)，對于操作jquery的朋友可以參考下。2010-04-04
這篇文章主要為大家詳細介紹了jQuery帶控制按鈕輪播圖插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07