JQuery是一款非常實用的Javascript庫，通過它可以很方便地實現各種各樣的功能，包括Div浮動顯示。下面是一個簡單的實例來展示如何使用JQuery實現Div浮動顯示。
<!DOCTYPE html>
<html>
<head>
<title>JQuery Div Float Display</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style type="text/css">
.float-box{
width: 200px;
height: 200px;
background-color: #009999;
color: #FFFFFF;
font-size: 32px;
text-align: center;
position: absolute;
display: none;
}
#btn-show{
width: 80px;
height: 30px;
background-color: #FF9900;
color: #FFFFFF;
font-size: 18px;
text-align: center;
padding-top: 8px;
cursor: pointer;
position: absolute;
left: 50%;
margin-left: -40px;
top: 50%;
margin-top: -15px;
z-index: 999;
}
</style>
</head>
<body>
<div class="float-box">
<p>這是浮動顯示的Div</p>
</div>
<div id="btn-show">顯示浮動Div</div>
<script type="text/javascript">
$(document).ready(function(){
//顯示浮動Div
$("#btn-show").click(function(){
$(".float-box").fadeIn("slow");
});
//隱藏浮動Div
$(".float-box").click(function(){
$(this).fadeOut("slow");
});
});
</script>
</body>
</html>以上是實現Div浮動顯示的完整代碼，主要就是通過設置浮動Div的樣式和使用fadeIn()和fadeOut()函數來實現Div的顯示和隱藏。另外，為了提高用戶體驗，我們也可以添加單擊浮動Div即可隱藏的功能，代碼中也給出了相應的實現方法。