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>
效果图：
相关推荐
"JQ中部浮窗"这个主题涉及到如何在网页的中间位置实现一个始终可见的浮动窗口，这在网页设计中常用于显示通知、广告或者重要的信息提示。 首先，我们需要理解jQuery的基本用法。jQuery库通过提供简洁的API来操作DOM...
在IT领域，尤其是在网页开发中，"JQ 侧浮窗与中浮窗切换"是一个常见的交互设计功能。这里的"JQ"通常指的是jQuery，一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。这个功能涉及到的是如何在用户...
《JQ轮播图精简版》是一款基于jQuery的轻量级轮播图插件，适用于网页中的图片或内容展示，具有简洁、高效的特点。在网页设计中，轮播图是一种常见的元素，它能以有限的空间展示多张图片或者信息，增加页面的动态效果...
《JQ 表单验证精简版》 在网页开发中，表单验证是一项不可或缺的功能，它能够确保用户输入的数据符合预设的规则，从而提高数据的准确性和系统的安全性。JQuery（简称JQ）作为一款强大的JavaScript库，提供了丰富的...
中间浮窗通常用于显示重要的通知、广告或者用户交互内容，它会始终保持在屏幕中央，即使页面滚动也是如此。 首先，我们需要创建HTML结构来定义浮窗。浮窗通常包含一个容器元素，里面可能有标题、内容和关闭按钮等...
标题“JQ 左右中下四个浮窗”暗示了这个话题主要围绕使用jQuery（简称JQ）实现页面上的四个浮动窗口布局。这通常是指在网页设计中，将四个独立的窗口或元素设置为浮动状态，使其能够在用户滚动页面时保持在屏幕的...
使用代码前必须引用jquery ，代码放在页面底部就行，亲测好用.
标题中的“JQ 精简的拖动框”指的是使用jQuery库实现的一个轻量级的可拖动对话框或窗口的功能。在网页交互设计中，拖动框常常用于创建可移动的弹出窗口，如设置面板、提示信息或者自定义组件。这种功能可以使用户...
在IT行业中，JavaScript库jQuery（通常简称为JQ）因其简洁的API和强大的功能而备受开发者喜爱。在网页开发中，日历控件是一个常见且实用的组件，它可以帮助用户方便地选择日期，常见于表单输入、事件预订或者时间...
JQAPI1.5中文最新版 JQAPI1.5中文最新版,开发得帮助利器，最新版本，用得比较爽，分享出来了，，，
jq min版. 1.8版本.用于前端开发. jquery.体积小.....
jq6500语音芯片是一款广泛应用在电子设备中的声音处理组件，主要负责音频数据的存储、解码和播放。这款芯片以其高效的性能、广泛的兼容性和易于编程的特点，在单片机控制的系统中得到了广泛的应用。 首先，我们来看...
这个`jq安装包rpm.rar`是一个包含了`jq`工具的RPM（Red Hat Package Manager）格式的压缩包，主要面向使用Linux发行版如CentOS、Fedora等的用户。RPM是Linux下的一种软件包管理器，它方便了软件的安装、升级和卸载。...
一款挺好用的jqure的弹出窗插件.....................
《JQ8400-FN/JQ8400-FL语音芯片/模块的应用解析与编程指南》 在嵌入式系统设计中，语音处理技术扮演着重要的角色，为设备提供直观的人机交互方式。JQ8400系列语音芯片就是其中的一款典型代表，适用于多种应用场景，...
jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件日历选择器jq 双日历插件...
"JQ网页版农历日历"是一个专为网页设计的插件，它允许开发者在网页上方便地显示日历，并且支持农历显示，大大提升了用户体验，特别是对于那些重视传统农历文化的用户群体。 首先，这个插件的核心功能是显示日历。它...
**JQ8900语音模块详解** JQ8900是一款广泛应用在单片机控制领域的高性能语音合成模块，支持多种微控制器如89C52、STM32和Arduino进行接口通信。该模块提供了丰富的功能，包括语音合成、音频格式转换、音量调节以及...