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

2019-11-20 09:05:13

字體：大中小

來源：轉載

供稿：網(wǎng)友

本文實例講述了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>

效果圖：