jQuery简单实现中间浮窗效果

本文实例讲述了jQuery简单实现中间浮窗效果。分享给大家供大家参考，具体如下：

basic.css:

/** - 样式说明- * 最大优先实现法，全局能实现不用区域，区域能实现不用模板，模板能实现不用界面，界面能实现不用标签* g -全局* t -区域* m -模板* ui -界面* lb -标签* j -脚本只使用在有射流研究…操作的样式*//*公共样式*/html、body、div、span、object、iframe、h1、h2、h3、h4、h5、h6、p、blockquote、pre、缩写、地址、引用、代码、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、the、tr、th、td、article、side、figure划水：0;} body { font-family : Helvetica，Tahoma，Arial，sans-serif；color : # 333 font-size :16 px；背景-color : # fff；}输入，选择，文本区域{ font-family : Helvetica，Tahoma，Arial，无衬线；背景# fffmargin:0划水：0;outline : none } text area { resize : none } img { border : none } I，em { font-style : normal；} ul Li { list-style-type : none；} a { color: # 06f文本装饰：无；} a:hover { color: # 06f文本修饰：下划线；}/*全局样式*/.g-fl {左浮动：}.g-fr { float : right；}.g-c { clear :双双；}index.html:

！DOCTYPE html html lang=' zh-cn ' hearta charset=' UTF-8 ' meta name=' viewport ' content=' width=设备宽度，初始比例=1，最大比例=1，用户比例=no ' title中间浮窗/title link href=' CSS/basic。CSS ' rel='样式表脚本src=' http : js/jquery-1。10 .1 .量滴js '/script/head dydiv style=' height :10000 px；/divstyle type='text/css'/*建议先隐藏浮窗的样式display:none*/.j-固定中心{高度：120 px宽度宽度：219像素背景技术# f60display:none位置：固定；}/style div id=' FixCenter ' class=' j-FixCenter ' img src=' http : img/FixCenter。jpg ' width=' 219 ' height=' 120 '使用map=' # FixCentermap '！-绘制地图，把图片哪个位置要点击的绘制出来-地图名称=' FixCenterMap ' id=' FixCenterMap '区域形状='rect '坐标='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脚本类型=' text/JavaScript ' $(function(){//调用浮窗方法fix CentER()；});//当调整浏览器窗口的大小时，发生调整大小事件$(窗口)。调整大小（函数(){ //重置浮窗定位fixentgetposition()；});函数fixCenter(){ //获取浮窗定位fixentgetposition()；//获取在浮窗的元素ID var FID=$(' # FixCenter ')；//渐变显示元素FID。FADEIN(600)；//关闭按钮的点击事件$('#closeFixCenter ').单击(函数(){ //渐变隐藏元素，三秒后重新显示fid.fadeOut(600).延迟(3000)。法丁(600);});}函数FixCenterGetPosition(){ var FID=$(' # FixCenter ')；//获取当前窗口的高度var h=$(窗口)。高度();//获取当前窗口的宽度var w=$(窗口)。宽度();//计算要定位左侧距离var left=(w/2)-ParSeint(FID。CSS(' width ')/2；//计算要定位上侧距离var top=(h/2)-ParSeint(FID。CSS('高度')/2；//设置定位距离的样式fid.css({'left':(左)“px”，“top”:(上)“px”})；}/脚本/正文/html效果图：

更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。