jquery實現(xiàn)點擊彈出帶標題欄的彈出層(從右上角飛入)效果

更新時間：2015年09月19日 10:31:24 作者：企鵝

這篇文章主要介紹了jquery實現(xiàn)點擊彈出帶標題欄的彈出層(從右上角飛入)效果,涉及jQuery響應鼠標事件操作頁面元素動畫效果的實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了jquery實現(xiàn)點擊彈出帶標題欄的彈出層(從右上角飛入)效果。分享給大家供大家參考。具體如下：

這是一款jquery實現(xiàn)的彈出層，點擊文字后從網(wǎng)頁右上角飛入，也可以說是滑入，此類彈出框帶有關閉按鈕，可自定義標題欄和彈出框內(nèi)容，風格自己可定義，代碼簡潔，基于jquery實現(xiàn)，學習參考價值大，也可拿出即用。

運行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-codes/

具體代碼如下：

<!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>
<title>jQuery從頁面右上角彈出的浮層代碼</title> 
<style>
*{margin:0;padding:0;list-style-type:none;}
body{font-family:'microsoft yahei';}
a{text-decoration:none;}
.showdiv{color:#fff;padding:8px 15px;background:#09F;text-align:center;display:block;width:150px;margin:100px auto;}
.showbox{width:0px;height:0px;display:none;position:absolute;right:0;top:0;z-index:100;border:1px #8FA4F5 solid;padding:1px;background:#fff;}
.showbox h2{height:25px;font-size:14px;background-color:#3366cc;position:relative;padding-left:10px;line-height:25px;color:#fff;}
.showbox h2 a{position:absolute;right:5px;top:0;font-size:12px;color:#fff;}
.showbox .mainlist{padding:10px;}
.showbox .mainlist p{font:normal 14px/2 'microsoft yahei';text-indent:2em;color:#333;padding-top:5px;}
#zhezhao{background-color:#666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".showdiv").click(function(){
  var box =300;
  var th= $(window).scrollTop()+$(window).height()/1.6-box;
  var h =document.body.clientHeight;
  var rw =$(window).width()/2-box;
  $(".showbox").animate({top:th,opacity:'show',width:600,height:340,right:rw},500);
  $("#zhezhao").css({
   display:"block",height:$(document).height()
  });
  return false;
 });
 $(".showbox .close").click(function(){
  $(this).parents(".showbox").animate({top:0,opacity: 'hide',width:0,height:0,right:0},500);
  $("#zhezhao").css("display","none");
 });
});
</script>
</head>
<body>
 <a class="showdiv" href="#">點擊我彈出浮層</a>
 <div class="showbox">
  <h2>腳本之家簡介<a class="close" href="#">關閉</a></h2>
  <div class="mainlist">
   <p>腳本之家是國內(nèi)專業(yè)的網(wǎng)站建設資源、腳本編程學習類網(wǎng)站，提供最新的網(wǎng)絡編程、腳本編程、網(wǎng)頁制作、網(wǎng)頁設計、網(wǎng)頁特效，為站長與網(wǎng)絡編程從業(yè)者提供學習資料。
</p>
  </div>
 </div> 
 <div id="zhezhao"></div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

希望本文所述對大家的jQuery程序設計有所幫助。

您可能感興趣的文章:

點擊彈出層外區(qū)域關閉彈出層jquery特效示例
擊彈出層，點擊彈出層外區(qū)域關閉彈出層，點擊關閉關閉彈出層jquery特效，具體代碼如下，喜歡的朋友可以學習下
2013-08-08
jquery之基本選擇器practice(實例講解)
下面小編就為大家?guī)硪黄猨query之基本選擇器practice(實例講解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
jquery實現(xiàn)進度條狀態(tài)展示
這篇文章主要為大家詳細介紹了jquery實現(xiàn)進度條狀態(tài)展示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-03-03
jQuery的幾個我們必須了解的特點
JQuery是一個快速的，簡潔的JavaScript庫，使用戶能更方便地處理HTML documents、events、實現(xiàn)動畫效果，并且方便地為網(wǎng)站提供AJAX交互。它的文檔說明很全，而且各種應用也說得很詳細，同時還有許多成熟的插件可供選擇。
2015-05-05
jQuery提示效果代碼分享
這里給大家分享幾段JQuery提示效果的代碼，非常的簡單實用，有需要的小伙伴直接拿走吧
2014-11-11
基于jquery實現(xiàn)的定時顯示與隱藏div廣告的實現(xiàn)代碼
有時候我們需要在jquery中要顯示與隱藏層，很簡單的方法就是直接使用hide與show方法就可以了，但要定時我們需要結合setTimeout函數(shù)來實現(xiàn)
2013-08-08
jquery增加和刪除元素的方法
這篇文章主要介紹了jquery增加和刪除元素的方法,涉及append、remove等方法的使用技巧,需要的朋友可以參考下
2015-01-01
基于PHP和Mysql相結合使用jqGrid讀取數(shù)據(jù)并顯示
jqGrid可以動態(tài)讀取和加載外部數(shù)據(jù)，本文將結合PHP和Mysql給大家講解如何使用jqGrid讀取數(shù)據(jù)并顯示，以及可以通過輸入關鍵字查詢數(shù)據(jù)的ajax交互過程
2015-12-12
jQuery制作簡潔的圖片輪播效果
這篇文章主要介紹了jQuery制作簡潔的圖片輪播效果，代碼非常的精簡，小伙伴們可以自己美化下，自由擴展。
2015-04-04
jQuery3.0中的buildFragment私有函數(shù)詳解
在 jQuery3.0中，buildFragment 是一個私有函數(shù)，用來構建一個包含子節(jié)點 fragment 對象。下文給大家介紹jQuery3.0中的buildFragment私有函數(shù)詳解，對jquery3.0 buildfragment相關知識感興趣的朋友一起學習吧
2016-08-08