jQuery简单实现中间浮窗效果


Posted in Javascript onSeptember 04, 2016

本文实例讲述了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 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();
});
//当调整浏览器窗口的大小时,发生 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程序设计有所帮助。

Javascript 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
Jul 31 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
Sep 09 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
JQuery表单元素取值赋值方法总结
May 12 jQuery
Vue实现todo应用的示例
Feb 20 Vue.js
JavaScript算法系列之快速排序(Quicksort)算法实例详解
Sep 04 #Javascript
jQuery中ScrollTo用法示例
Sep 04 #Javascript
jQuery与JS加载事件用法分析
Sep 04 #Javascript
jQuery轮播图效果精简版完整示例
Sep 04 #Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 #Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 #Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 #Javascript
You might like
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
php addslashes 函数详细分析说明
2009/06/23 PHP
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
2015/07/29 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
jquery BS,dialog控件自适应大小
2009/07/06 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
Python的Django框架中自定义模版标签的示例
2015/07/20 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
python迭代器常见用法实例分析
2019/11/22 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
Vero Moda西班牙官方购物网站:丹麦BESTSELLER旗下知名女装品牌
2018/04/27 全球购物
管理科学大学生求职信
2013/11/13 职场文书
爱情检讨书大全
2014/01/21 职场文书
创先争优制度
2014/01/21 职场文书
女生节标语
2014/06/26 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
国企干部对照检查材料
2014/08/22 职场文书