偶实现的代码
<!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 rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
</head>
<body>
<div style="height:10000px;"></div>
<style>.fix-center{ height:120px; width:219px; display:none; position:fixed; }</style>
<div id="fixCenter" class="fix-center">
<img src="fixCenter.jpg" width="219" height="120" usemap="#fixCenterMap">
<map name="fixCenterMap" id="fixCenterMap">
<area shape="rect" coords="175,0,219,30" href="javascript:void(0);" id="closeFixCenter" />
<area shape="rect" coords="0,30,219,94" href ="###1" target="_blank" />
<area shape="rect" coords="0,94,219,120" href ="###2" target="_blank" />
</map>
</div>
<script>
$(function(){
fixCenter();
});
function fixCenter(){
var fid = $('#fixCenter');
var h = $(window).height();
var w = $(window).width();
var l = (w/2) - parseInt(fid.css('width')) / 2;
var t = (h/2) - parseInt(fid.css('height')) / 2;
fid.css({'left': (l) + 'px', 'top': (t) + 'px' }).fadeIn(600);
$('#closeFixCenter').click(function(){
fid.fadeOut(600).delay(20000).fadeIn(600);
});
$(window).resize(function(){
h = $(window).height();
w = $(window).width();
l = (w/2) - parseInt(fid.css('width')) / 2;
t = (h/2) - parseInt(fid.css('height')) / 2;
fid.css({'left':(l) + 'px', 'top': (t) + 'px' });
});
}
</script>
</body>
</html>
结果群友（小硕）实现更短的代码：
function fixCenter(){
var fid = $('#fixCenter');
var h = $(window).height();
var w = $(window).width();
var l = (w/2) - parseInt(fid.width()) / 2;
var t = (h/2) - parseInt(fid.height()) / 2;
fid.css({'left': (l) + 'px', 'top': (t) + 'px' }).fadeIn(600);
$('#closeFixCenter').click(function(){
fid.fadeOut(600).delay(20000).fadeIn(600);
});
$(window).resize(function(){
h = $(window).height();
w = $(window).width();
l = (w/2) - parseInt(fid.width()) / 2;
t = (h/2) - parseInt(fid.height()) / 2;
fid.css({'left':(l) + 'px', 'top': (t) + 'px' });
});
}
效果图：
相关推荐
"JQ中部浮窗"这个主题涉及到如何在网页的中间位置实现一个始终可见的浮动窗口，这在网页设计中常用于显示通知、广告或者重要的信息提示。 首先，我们需要理解jQuery的基本用法。jQuery库通过提供简洁的API来操作DOM...
在这个场景下，我们关注的是如何使用jQuery这一流行的JavaScript库来实现这一功能，而尽可能减少代码量。jQuery以其简洁易用的API著称，使得这种功能的实现变得非常快捷。 首先，我们需要在HTML中添加一个用于触发...
标题“JQ 最少代码实现多图切换”指的是使用jQuery库来实现一个高效、简洁的多张图片轮播效果。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得开发者能够用更少的代码完成复杂的...
标题“JQ最少代码实现全选和不全选”涉及到的是如何使用jQuery来控制多选框（checkboxes）的全选与反选功能。这种功能常见于数据管理界面，用户可以快速选择或取消选择所有项目。下面将详细解释这一知识点。 一、...
**标题：“JQ最少代码实现无缝滚动”** 在网页设计中，为了提供用户更好的浏览体验，无缝滚动效果常被用于长列表或者图片展示。JQuery（简称JQ）作为一个轻量级、功能丰富的JavaScript库，提供了简单易用的API来...
标题 "JQ 最少代码实现选项卡切换" 涉及到的是使用 jQuery（简称 JQ）库来创建一个简洁的选项卡切换效果。在网页设计中，选项卡是一种常见的用户界面元素，它允许用户在有限的空间内查看多个相关的但不同时显示的...
标题 "JQ 最少代码实现title标签切换内容" 指的是使用jQuery库来实现一个功能，即在网页上动态地切换元素的`title`属性内容。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax交互...
在本文中，我们将深入探讨如何使用JavaScript库JQuery（简称JQ）来创建一个高效的、最少代码实现的导航栏下拉菜单。下拉菜单在现代网页设计中是必不可少的元素，它能帮助用户轻松访问网站的多层次结构。下面，我们将...
这个标题提到的“最少代码实现当前的星期加时间”，意味着我们要讨论如何使用jQuery来获取当前日期，并显示星期与时间，而且代码量要尽可能地精简。 在JavaScript中，我们可以使用内置的`Date`对象来获取当前日期和...
JQ中间浮窗精简版，通过优化代码结构和减少不必要的功能，降低了资源占用，提高了加载速度，从而提升了用户体验。 该工具有以下几个核心知识点： 1. **jQuery库的使用**：jQuery是一个广泛使用的JavaScript库，它...
本主题聚焦于如何使用最少的jQuery代码来创建一个具有数字指示器和箭头切换功能的焦点图。焦点图通常用于在网页上展示一组图片或内容，用户可以通过点击或自动轮播来切换。 首先，让我们了解焦点图的基本结构。它...
在IT领域，尤其是在网页开发中，"JQ 侧浮窗与中浮窗切换"是一个常见的交互设计功能。这里的"JQ"通常指的是jQuery，一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果。这个功能涉及到的是如何在用户...
在前端开发中，jQuery库提供了简单易用的API，使得开发者能够以最少的代码实现这种布局。 在本文中，我们将深入探讨如何使用jQuery实现瀑布流布局。首先，我们需要理解瀑布流布局的基本原理。通常，它涉及到以下几...
标题“JQ 左右中下四个浮窗”暗示了这个话题主要围绕使用jQuery（简称JQ）实现页面上的四个浮动窗口布局。这通常是指在网页设计中，将四个独立的窗口或元素设置为浮动状态，使其能够在用户滚动页面时保持在屏幕的...
使用代码前必须引用jquery ，代码放在页面底部就行，亲测好用.
【标题】"JQ轮播图代码，考呗可用"所指的知识点是关于使用jQuery库实现轮播图效果的编程技巧。jQuery是一款轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。在网页设计中，轮播图是一种...
以下是关于这一功能实现的关键知识点： 1. **jQuery库**：jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。在这个项目中，jQuery是核心，用于处理DOM操作和事件监听。...
本篇文章将详细介绍如何使用JQ实现一个无缝轮播代码，并对关键代码进行解析。 ### 1. HTML结构 首先，我们需要创建HTML结构来承载轮播图。通常，我们会有多个图片元素（`<img>`）放置在一个容器（如`<div>`）内，...