本文实例讲述了jQuery简单实现中间浮窗效果。分享给大家供大家参考，具体如下：
basic.css：
/* * -- 样式说明 -- * 最大优先实现法，全局能实现不用区域，区域能实现不用模板，模板能实现不用界面，界面能实现不用标签 * g - 全局 * t - 区域 * 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></div> <style type="text/css"> /*建议先隐藏浮窗的样式 display:none*/ .j-fixcenter{ height:120px; width:219px; background:#f60; display:none; position:fixed; } </style> <div id="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(); }); //当调整浏览器窗口的大小时，发生 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程序设计有所帮助。