<!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>
?
效果图：
?
?
?
?
原文：http://onestopweb.iteye.com/blog/2294832