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 相关文章推荐
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
jQuery中:gt选择器用法实例
Dec 29 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
对layui中表单元素的使用详解
Aug 15 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
JavaScript实现音乐播放器
Aug 14 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
漫荒推荐:画风超赞的国风漫画推荐 超长假期不无聊
2020/03/08 国漫
[原创]PHP中通过ADODB库实现调用Access数据库之修正版本
2006/12/31 PHP
PHP 命名空间实例说明
2011/01/27 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
PHP数组操作实例分析【添加,删除,计算,反转,排序,查找等】
2016/12/24 PHP
SOSO地图API使用(一)在地图上画圆实现思路与代码
2013/01/15 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
js + css实现标签内容切换功能(实例讲解)
2017/10/09 Javascript
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
python如何将图片转换为字符图片
2020/08/19 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
校园十大歌手策划书
2014/02/01 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
党员教师工作决心书
2014/03/13 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
退学证明范本3篇
2014/10/29 职场文书
烟台的海导游词
2015/02/02 职场文书
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers