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之大字符串的连接的StringBuffer 类
May 08 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
javascript 当前日期转化为中文的实现代码
May 13 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
js给table赋值的实例代码
Oct 13 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
js+css实现扇形导航效果
Aug 18 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安全配置方法
2007/06/16 PHP
FleaPHP的安全设置方法
2008/09/15 PHP
php+javascript的日历控件
2009/11/19 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
JS获取鼠标坐标位置实例分析
2016/01/20 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
使用angularjs.foreach时return的问题解决
2018/09/30 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
[00:37]2016完美“圣”典风云人物:rOtk宣传片
2016/12/09 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
Django 路由系统URLconf的使用
2018/10/11 Python
Django中create和save方法的不同
2019/08/13 Python
Python字典实现伪切片功能
2020/10/28 Python
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
房地产销售经理岗位职责
2014/01/01 职场文书
优秀党员主要事迹
2014/01/19 职场文书
竞选部门副经理的自荐书范文
2014/02/11 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2016母亲节感恩话语
2015/12/09 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
Python编写nmap扫描工具
2021/07/21 Python
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android