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 相关文章推荐
node.js中的console.log方法使用说明
Dec 09 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
省市二级联动小案例讲解
Jul 24 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
利用vscode编写vue的简单配置详解
Jun 17 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 Javascript
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支持断点续传的源码
2010/05/16 PHP
PHP中数组合并的两种方法及区别介绍
2012/09/14 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
前台js改变Session的值(用ajax实现)
2012/12/28 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
vue 实现单选框设置默认选中值
2019/11/07 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
python随机模块random的22种函数(小结)
2020/05/15 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
平民服装店创业计划书
2014/01/17 职场文书
通信研究生自荐信
2014/02/01 职场文书
经济管理专业求职信
2014/06/09 职场文书
2014年文秘工作总结
2014/11/25 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
德生2P3收音机开箱评测
2022/04/30 无线电