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的设计模式
Nov 22 Javascript
Javascript操纵Cookie实现购物车程序
Nov 23 Javascript
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
JavaScript For Beginners(转载)
Jan 05 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
JavaScript表单验证开发
Nov 23 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
如何使用puppet替换文件中的string
Dec 06 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 设计模式之观察者模式介绍
2012/02/22 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
php结合ajax实现手机发红包的案例
2016/10/13 PHP
ECMAScript6块级作用域及新变量声明(let)
2015/06/12 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
2015/09/15 Javascript
JS实现输入框提示文字点击时消失效果
2016/07/19 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
2020/12/05 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
python正则表达式的使用
2017/06/12 Python
python正则实现计算器功能
2017/12/14 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
Python实现滑动平均(Moving Average)的例子
2019/08/24 Python
Python partial函数原理及用法解析
2019/12/11 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
会计系毕业个人自荐信格式
2013/09/23 职场文书
淘宝好评语大全
2014/05/05 职场文书
校本教研活动总结
2014/07/01 职场文书
2014年基建工作总结
2014/12/12 职场文书
求职自我评价参考范文
2019/05/16 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript