jQuery简单实现中间浮窗效果
更新时间：2016年09月04日 14:17:09 作者：onestopweb
这篇文章主要介绍了jQuery简单实现中间浮窗效果,涉及jQuery事件响应及动态操作页面元素属性的相关技巧,需要的朋友可以参考下
本文实例讲述了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扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍了jquery清空表单数据的示例,需要的朋友可以参考下2014-02-02
下面小编就为大家带来一篇JQ图片文件上传之前预览功能的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要为大家详细介绍了jquery点击展示与隐藏更多内容的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
操作select下拉框的jquery插件，以后再涉及select时，利用这个插件就简单多了。2009-08-08
jQuery 1.5 源码有8068行。很多想读 jQuery 源码的童鞋在读了一半不到就不敢往下读了，jQuery是一个 封装良好、代码紧凑 的框架。2011-04-04
jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性，本文给大家介绍jquery ajax用法详解，感兴趣的朋友一起学习吧2015-11-11
这篇文章主要介绍了jquery处理页面弹出层查询数据等待操作,实例分析了jquery实现等待效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
jQuery 事件模型相关资料，需要的朋友可以参考下。2010-02-02
这篇文章主要介绍了jquery实现的淡入淡出下拉菜单效果,涉及jquery操作页面属性的动态添加与删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
在使用jquery操作js时，经常弄不明白this与$(this)。最近不是很忙，抽空仔细研究了一下，记录下来以供在忘记的时候拉出来参考参考！2014-11-11
最新评论