jQuery簡單實現(xiàn)中間浮窗效果

更新時間：2016年09月04日 14:17:09 作者：onestopweb

這篇文章主要介紹了jQuery簡單實現(xiàn)中間浮窗效果,涉及jQuery事件響應及動態(tài)操作頁面元素屬性的相關技巧,需要的朋友可以參考下

本文實例講述了jQuery簡單實現(xiàn)中間浮窗效果。分享給大家供大家參考，具體如下：

basic.css：

/*
* -- 樣式說明 --
* 最大優(yōu)先實現(xiàn)法，全局能實現(xiàn)不用區(qū)域，區(qū)域能實現(xiàn)不用模板，模板能實現(xiàn)不用界面，界面能實現(xiàn)不用標簽
* g - 全局
* t - 區(qū)域
* m - 模板
* ui - 界面
* lb - 標簽
* j - 腳本 只使用在有JS操作的樣式
*/
/*公共樣式*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary{ margin:0; padding:0;}
body{ font-family:Helvetica,Tahoma,Arial,sans-serif; color:#333; font-size:16px; background-color:#fff;}
input, select, textarea{ font-family:Helvetica,Tahoma,Arial,sans-serif; background:#fff; margin:0; padding:0; outline:none;}
textarea{ resize:none;}
img{ border:none;}
i, em{ font-style:normal;}
ul li{ list-style-type:none;}
a{ color:#06f; text-decoration:none;}
a:hover{ color:#06f; text-decoration:underline;}
/*全局樣式*/
.g-fl{ float:left;}
.g-fr{ float:right;}
.g-c{ clear:both;}

index.html：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>中間浮窗</title>
<link href="css/basic.css" rel="stylesheet">
<script src="js/jquery-1.10.1.min.js"></script>
</head>
<body>
<div style="height:10000px;"></div>
<style type="text/css">
/*建議先隱藏浮窗的樣式 display:none*/
.j-fixcenter{ height:120px; width:219px; background:#f60; display:none; position:fixed; }
</style>
<div id="fixCenter" class="j-fixcenter">
  <img src="img/fixCenter.jpg" width="219" height="120" usemap="#fixCenterMap">
  <!--繪制地圖，把圖片哪個位置要點擊的繪制出來-->
  <map name="fixCenterMap" id="fixCenterMap">
    <area shape="rect" coords="175,0,219,30" href="javascript:void();" id="closeFixCenter" />
    <area shape="rect" coords="0,30,219,94" href ="###2" />
    <area shape="rect" coords="0,94,219,120" href ="###3" />
  </map>
</div>
<script type="text/javascript">
$(function(){
  //調用浮窗方法
  fixCenter();
});
//當調整瀏覽器窗口的大小時，發(fā)生 resize 事件
$(window).resize(function(){
  //重置浮窗定位
  fixCenterGetPosition();
});
function fixCenter(){
  //獲取浮窗定位
  fixCenterGetPosition();
  //獲取在浮窗的元素ID
  var fid = $("#fixCenter");
  //漸變顯示元素
  fid.fadeIn(600);
  //關閉按鈕的點擊事件
  $("#closeFixCenter").click(function(){
    //漸變隱藏元素，三秒后重新顯示
    fid.fadeOut(600).delay(3000).fadeIn(600);
  });
}
function fixCenterGetPosition(){
  var fid = $("#fixCenter");
  //獲取當前窗口的高度
  var h = $(window).height();
  //獲取當前窗口的寬度
  var w = $(window).width();
  //計算要定位左側距離
  var left = (w/2) - parseInt(fid.css("width")) / 2;
  //計算要定位上側距離
  var top = (h/2) - parseInt(fid.css("height")) / 2;
  //設置定位距離的樣式
  fid.css({"left":(left) + "px", "top": (top) + "px" });
}
</script>
</body>
</html>

效果圖：

更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

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

您可能感興趣的文章:

基于jquery的一個浮動框(擴展性比較好 )
在用Maxthon的時候無意看到一個浮動框，把它改成基于jquery的，擴展性比較好，發(fā)來分享下。
2010-08-08
jquery ajax 調用失敗的原因示例介紹
jquery 在使用ajax過程中出現(xiàn)調用失敗的情況，想必大家都有遇到過吧，在本文有個不錯的示例，希望對大家有所幫助
2013-09-09
animate動畫示例(淚奔的小孩)及stop和delay的使用
實現(xiàn)原理：停止動畫，當一個元素有一個動畫隊列時，停止的是當前動畫，緊接著執(zhí)行下一個動畫，具體代碼如下，感興趣的朋友可以參考下哈，希望對你學習jquery動畫有所幫助
2013-05-05
Jquery ajax執(zhí)行順序返回自定義錯誤信息(實例講解)
由于Jquery中的Ajax的async默認是true(異步請求),如果想一個Ajax執(zhí)行完后再執(zhí)行另一個Ajax, 需要把async=false就可以了
2013-11-11
javascript異步處理與Jquery deferred對象用法總結
這篇文章主要介紹了javascript異步處理與Jquery deferred對象用法,結合實例形式總結分析了jQuery異步請求處理相關操作技巧,需要的朋友可以參考下
2019-06-06
jQuery 判斷元素是否存在然后按需加載內容的實現(xiàn)代碼
這篇文章主要介紹了jQuery 判斷元素是否存在然后按需加載內容的實現(xiàn)代碼,需要的朋友可以參考下
2020-01-01
利用jquery獲取select下拉框的值
本篇文章主要介紹了利用jquery獲取select下拉框的值，如果你jquery不是特別熟練，每次使用不常用的就要百度。那么這篇文章應該會有所幫助，需要的朋友可以過來參考下
2016-11-11
一些主流JS框架中DOMReady事件的實現(xiàn)小結
在實際應用中，我們經(jīng)常會遇到這樣的場景，當頁面加載完成后去做一些事情：綁定事件、DOM操作某些結點等。
2011-02-02
jQuery實現(xiàn)摸擬alert提示框
這篇文章主要介紹了jQuery實現(xiàn)摸擬alert提示框的相關資料,需要的朋友可以參考下
2016-05-05
jQuery實現(xiàn)的簡單無刷新評論功能示例
這篇文章主要介紹了jQuery實現(xiàn)的簡單無刷新評論功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,代碼中備有較為詳盡的注釋便于理解,需要的朋友可以參考下
2017-11-11