`

JQ 最少代码实现中部浮窗功能

阅读更多

偶实现的代码

<!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' }); 	
	});
}

 

效果图:

 

 

 

 

 

 

  • 大小: 37.8 KB
1
1
分享到:
评论

相关推荐

    最少代码jquery滚动到scrollto插件

    最简单的滚动到(scrollto)插件,功能少,jquery代码少,逻辑简单,一看就明白。这种简单的jquery插件有时候还是蛮有用的。 这个最简单的jquery滚动到插件你灵活运用一下就有多种玩法,比如,可以做出 滚动到顶部...

    hhhhh安卓开发教程大全

    hhhhh安卓开发教程大全

    avem-labs_Avem_1740990015.zip

    avem-labs_Avem_1740990015.zip

    25883-mofangmall.com 微信群管理机器人系统网站.zip

    微信群机器人管理系统源码 微信群机器人管理系统源码 支持同登陆多个微信 源码类型: C/S 开发环境: VS2010 SQL2008R2 菜单功能 1、支持同时登录多个微信 2、支持机器人聊天(笑话,成语接龙、故事会、智力等等) 3、支持签到 4、可自定义回复 5、可自定义红包语 6、支持定期发送公告(如群规,广告)等 1、WeChatRobots后台配置web版 2、数据库在WeiChartGroup.Net/app_data中,附加即可

    https://upload.csdn.net/creation/uploadResources?spm=1003.2018.3001.4314

    https://upload.csdn.net/creation/uploadResources?spm=1003.2018.3001.4314

    名字微控制器_STM32_课程_DeepBlue_1740989720.zip

    名字微控制器_STM32_课程_DeepBlue_1740989720.zip

    S7-200Smart恒压供水程序示例与485通讯实践:操作指南与案例解析,S7-200 Smart可编程控制器恒压供水程序设计与实现,附带485通讯范例,S7-200Smart 恒压供水程序样例+4

    S7-200Smart恒压供水程序示例与485通讯实践:操作指南与案例解析,S7-200 Smart可编程控制器恒压供水程序设计与实现,附带485通讯范例,S7-200Smart 恒压供水程序样例+485通讯样例 ,S7-200Smart; 恒压供水程序样例; 485通讯样例,S7-200Smart程序样例:恒压供水及485通讯应用示例

    Java读写Mifare M1卡IC卡源码

    Java使用JNA、JNI两种不同方式调用DLL、SO动态库方式读写M1卡源码,支持读写M1卡扇区数据、修改IC卡扇区密钥、改写UID卡卡号等功能,支持Windows系统,同时支持龙芯Mips、LoongArch、海思麒麟鲲鹏飞腾Arm、海光兆芯x86_Amd64等架构平台的国产统信、麒麟等Linux系统,内有jna-4.5.0.jar包,vx13822155058 qq954486673

    UDP协议接收和发送数据示例JAVA

    UDP协议接收和发送数据示例JAVA

    VU-DBS项目:深脑刺激器的全程辅助

    本文介绍了范德堡大学深脑刺激器(DBS)项目,该项目旨在开发和临床评估一个系统,以辅助从规划到编程的整个过程。DBS是一种高频刺激治疗,用于治疗运动障碍,如帕金森病。由于目标区域在现有成像技术中可见性差,因此DBS电极的植入和编程过程复杂且耗时。项目涉及使用计算机辅助手术技术,以及一个定制的微定位平台(StarFix),该平台允许在术前进行图像采集和目标规划,提高了手术的精确性和效率。此外,文章还讨论了系统架构和各个模块的功能,以及如何通过中央数据库和网络接口实现信息共享。

    图像识别项目源码资源(Python和C++)

    图像识别”项目源码资源(Python和C++)

    虚拟同步电机与并电网模型的Simulink仿真参数配置与直接使用指南,虚拟同步电机与并电网模型的Simulink仿真:参数齐全,直接使用,同步电机simulink仿真 并电网模型仿真 参数设置好了

    虚拟同步电机与并电网模型的Simulink仿真参数配置与直接使用指南,虚拟同步电机与并电网模型的Simulink仿真:参数齐全,直接使用,同步电机simulink仿真 并电网模型仿真 参数设置好了,可直接使用 ,虚拟同步电机; simulink仿真; 并电网模型仿真; 参数设置; 使用,虚拟同步电机Simulink仿真与并电网模型参数化应用

    三菱FX3U与力士乐VFC-x610变频器通讯案例详解:PLC控制下的变频器操作与设置程序,含接线方式及昆仑通态触摸屏操作指南,三菱FX3U与力士乐VFC-x610变频器通讯案例详解:接线、设置与程序

    三菱FX3U与力士乐VFC-x610变频器通讯案例详解:PLC控制下的变频器操作与设置程序,含接线方式及昆仑通态触摸屏操作指南,三菱FX3U与力士乐VFC-x610变频器通讯案例详解:接线、设置与程序注解,实现频率设定、启停控制与实时数据读取功能。,三菱FX3U与力士乐VFC-x610变频器通讯程序三菱FX3U与力士乐VFC-x610变频器通讯案例程序,有注释。 并附送程序,有接线方式,设置。 器件:三菱FX3U的PLC,力士乐VFCx610变频器,昆仑通态,威纶通触摸屏。 功能:实现频率设定,启停控制,实际频率读取等。 ,三菱FX3U;力士乐VFC-x610变频器;通讯程序;案例程序;注释;接线方式;设置;频率设定;启停控制;实际频率读取;昆仑通态;威纶通触摸屏。,三菱FX3U与力士乐VFC-x610变频器通讯程序及案例:频率控制与读取实践

    xmselect测试用例~~~~~~~~~~~~~~

    xmselect测试用例~~~~~~~~~~~~~~

    Unity-游戏开发-模型资源-科幻武器

    总共包含 32 款 AAA 级科幻武器。四种武器类型,每种有 8 种不同的纹理变化! 所有内容均采用 PBR 材质,可直接用于开发游戏!

    python词云生成器,将txt文本自动分割生成词云图

    python词云生成器,将txt文本自动分割生成词云图

    基于物联网智能化平台的智慧园区解决方案PPT(28页).pptx

    智慧园区,作为现代城市发展的新形态,旨在通过高度集成的信息化系统,实现园区的智能化管理与服务。该方案提出,利用智能手环、定制APP、园区管理系统及物联网技术,将园区的各类设施与设备紧密相连,形成一个高效、便捷、安全的智能网络。从智慧社区到智慧酒店,从智慧景区到智慧康养,再到智慧生态,五大应用板块覆盖了园区的每一个角落,为居民、游客及工作人员提供了全方位、个性化的服务体验。例如,智能手环不仅能实现定位、支付、求助等功能,还能监测用户健康状况,让科技真正服务于生活。而智慧景区的建设,更是通过大数据分析、智能票务、电子围栏等先进技术,提升了游客的游玩体验,确保了景区的安全有序。 尤为值得一提的是,方案中的智慧康养服务,展现了科技对人文关怀的深刻体现。通过智慧手环与传感器,自动感知老人身体状态,及时通知家属或医疗机构,有效解决了“空巢老人”的照护难题。同时,智慧生态管理系统的应用,实现了对大气、水、植被等环境要素的实时监测与智能调控,为园区的绿色发展提供了有力保障。此外,方案还提出了建立全域旅游营销平台,整合区域旅游资源,推动旅游业与其他产业的深度融合,为区域经济的转型升级注入了新的活力。 总而言之,这份智慧园区建设方案以其前瞻性的理念、创新性的技术和人性化的服务设计,为我们展示了一个充满智慧与活力的未来园区图景。它不仅提升了园区的运营效率和服务质量,更让科技真正融入了人们的生活,带来了前所未有的便捷与舒适。对于正在规划或实施智慧园区建设的决策者而言,这份方案无疑提供了一份宝贵的参考与启示,激发了他们对于未来智慧生活的无限遐想与憧憬。

    使用 SignalR 在 .NET Core 8 最小 API 中构建实时通知

    使用 SignalR 在 .NET Core 8 最小 API 中构建实时通知,构建实时应用程序已成为现代 Web 开发中必不可少的部分,尤其是对于通知、聊天系统和实时更新等功能。SignalR 是 ASP.NET 的一个强大库,可实现服务器端代码和客户端 Web 应用程序之间的无缝实时通信。 参考文章:https://blog.csdn.net/hefeng_aspnet/article/details/145990801

    自适应网址导航网站发布页单页网页模板html源码

    自适应网址导航网站发布页单页网页模板html源码,超级好看自适应清新网址导航网站发布页单页网页模板html源码!无论电脑还是手机,这是一个网页单页源码!! 模板无后台模板,无需数据库,上传服务器直接能用。

Global site tag (gtag.js) - Google Analytics