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获得CheckBoxList选中的数量
Oct 27 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
Dec 21 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
jquery中push()的用法(数组添加元素)
Nov 25 Javascript
Bootstrap学习笔记之css组件(3)
Jun 07 Javascript
Jquery 整理元素选取、常用方法一览表
Nov 26 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
vue实现简单图片上传
Jun 30 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将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
百度地图api应用标注地理位置信息(js版)
2013/02/01 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
通过实例讲解JS如何防抖动
2019/06/15 Javascript
加速vue组件渲染之性能优化
2020/04/09 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
快速了解python leveldb
2018/01/18 Python
python实现SOM算法
2018/02/23 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
python批量下载抖音视频
2019/06/17 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
python数字类型math库原理解析
2020/03/02 Python
详解Python调用系统命令的六种方法
2021/01/28 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
Python是如何进行类型转换的
2013/06/09 面试题
日化店促销方案
2014/03/26 职场文书
学生会主席竞聘书
2014/03/31 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
java泛型通配符详解
2021/07/25 Java/Android
Elasticsearch 数据类型及管理
2022/04/19 Python
APP界面设计技巧和注意事项
2022/04/29 杂记