3. 窗口效果
window.html
<html>
<head>
<title>窗口效果</title>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8”>
<link type=”text/css” rel=”stylesheet” href=”css/window.css” />
<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/ window.js”></script>
</head>
<body>
<input type="button" value="左下角显示窗口" id="leftpop" />
<input type="button" value="屏幕中间显示窗口" id="centerpop" />
<div class="window">
<div class="title" id="center">
<img alt="关闭" src="images/close.gif" />
我是中间显示窗口的标题栏
</div>
<div class="content">
我是中间显示窗口的内容区
</div>
</div>
<div class="window" id="left">
<div class="title">
<img alt="关闭" src="image/close.gif" />
我是左边显示窗口的标题栏
</div>
<div class="content">
我是左边显示窗口的内容区
</div>
</div>
<div class="window" id="right">
<div class="title">
<img alt="关闭" src="image/close.gif" />
我是右边显示窗口的标题栏
</div>
<div class="content">
我是右边显示窗口的内容区
</div>
</div>
</body>
</html>
window.css
.window {
background-color: #D0DEF0;
width: 250px;
/*padding: 2px;*/
margin: 5px;
position: absolute; /*控制窗口绝对定位*/
display:none;
}
.content {
height: 150px;
background-color: white;
border: 2px solid #D0DEF0;
padding: 2px;
overflow: auto; /*可显示滚动条*/
}
.title {
padding:4px;
font-size: 14px;
}
.title img {
width: 16px;
height: 16px;
float: right;
cursor: pointer;
}
window.js
$(document).ready(function() {
//1. 点击按钮可以在屏幕中间显示一个窗口
//2. 点击按钮2可以在屏幕的左下角显示一个窗口
var contentwin = $("#center").mywin({left: "center", top: "center"});
var leftwin = $("#left").mywin({left: "left", top: "bottom"}, function() {
leftwin.slideUp("slow");
} );
$("#contentpop").click(function(){
//鼠标点击按钮之后，把id为center的窗口显示在页面中间
//计算位于屏幕中间的窗口的左边界和上边界的值
// 浏览器可视区域的宽和高，当前窗口的宽和高
contentwin.show("slow");
});
$("#leftpop").click(function() {
leftwin.slideDown("slow");
}
});
//position包含两个属性，一个是left，一个是top
//hidefunc表示执行窗口隐藏的方法
$.fn.mywin = function(position, hidefunc) {
if(position && position instanceof Object) {
var positionleft = position.left;
var positiontop = position.top;
var windowobj = $(window);
var browserwidth = $(window).width();
var browserheight = $(window).height();
var scrollLeft = $(window).scrollLeft();
var scrollTop = $(windwo).scrollTop();
var currentwin = this;
var cwinwidth = currentwin.outerWidth(true);
var cwinheight = currentwin.outerHeight(true);
var left;
var top;
function calLeft(positionleft,scrollLeft,browsewidth,cwinwidth){
if(positionleft && typeof positionleft == "string") {
if(positionleft == "center") {
left = scrollLeft + (browserwidth – cwinwidth) /2;
}else if (positionleft == "left") {
left = scrollLeft;
}else if (positionleft == "right") {
left = scrollLeft + browserwidth – cwinwidth;
}else {
left = scrollLeft + (browserwidth – cwinwidth) /2;
}
}else if(positionleft && typeof positionleft == "number" ) {
left = positionleft;
}else {
left = 0;
}
currentwin.data("positionleft",positionleft);
}
calLeft(positionleft,scrollLeft,browsewidth,cwinwidth)
function calTop(positiontop,scrollTop,browseheight,cwinwidthheight) {
if(positiontop && typeof positiontop == "string") {
if(positiontop == "center") {
top =scrollTop + (browserheight – cwinheight) / 2;
}else if (positiontop == "top") {
top = scrollTop;
}else if (positiontop == "bottom") {
top = scrollTop + browseheight – cwinheight;
}else {
top =scrollTop + (browserheight – cwinheight) / 2;
}
} else if(positionleft && typeof positiontop == "number" ) {
top = positionleft;
}else {
top = 0;
}
currentwin.data("positiontop",positiontop);
}
calTop(positiontop,scrollTop,browseheight,cwinwidthheight);
var scrollTimeout;
$(window).scroll(function() {
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function() { //延时处理
var browserwidth = $(window).width();
var browserheight = $(window).height();
var scrollLeft = $(window).scrollLeft();
var scrollTop = $(windwo).scrollTop();
calLeft(currentwin.data("positionleft"),scrollLeft,browsewidth,cwinwidth);
calTp[(currentwin.data("positiontop"),scrollLeft,browsheight,cwinheight);
currentwin.animate({
left: left,
top: top;
},300);
},300);
});
$(window).resize(function(){
var browserwidth = $(window).width();
var browserheight = $(window).height();
var scrollLeft = $(window).scrollLeft();
var scrollTop = $(windwo).scrollTop();
calLeft(currentwin.data("positionleft"),scrollLeft,browsewidth,cwinwidth);
calTp[(currentwin.data("positiontop"),scrollLeft,browsheight,cwinheight);
currentwin.animate({
left: left,
top: top;
},300);
});
currentwin.css("left",left).css("top",top);
currentwin.children(".title").children("img").click(function(){
if(!hidefunc) {
currentwin.hide("slow");
}else {
hidefunc();
}
});
return currentwin; //返回当前对象，以便可以级联的执行其他方法
}
}
知识宝典
1. 页面中模拟的窗口可以通过html的div标签来实现，窗口中的标题栏和内容区域可以再分别用一个div来表示
2. 让一组div看起来是窗口的样式，有很多种方法，比如可以设定整个窗口使用一种背景色，然后内容区域使用另一种背景色，并且给窗口一定的padding值(或者是内容区域设置边框)，以达到内容区域和标题栏以后窗口外边的对比，从而看起来是窗口的效果
3. 正确理解float的效果，实际上会影响到后面的一个元素和float的元素之间的显示效果
4. overflow属性值为auto时，当内容区域很多超过了定义的高度或宽度时，就会显示滚动条
5. position属性值为absolute是，元素将在页面中绝对定位。如果祖先节点中有position:relative的定义，则相对于这个祖先节点的左上角进行定位
6. 浏览器可视区域的宽和高可以通过$(window).width() 和$(window).height()的方式获得
7. 浏览器滚动条的左边界和上边界可以通过$(window).scrollLeft()和$(window).scrollTop()来获得
8. 窗口定位到屏幕可视区域的正中间，需要用屏幕可视区域的宽减去窗口的宽，然后除2，在加上滚动条的左边界值，才能获得窗口需要的左边界值；上边界值也是同理的方法获得。
9. 插件的编写方法：$.fn.muplugin = function(){}, 方法中的this表示的是执行这个方法的jquery对象，注意方法应该在最后return this, 一保证其他jquery方法可以级联操作
10. instanceof可以用于判断一个变量是不是某个Js类的实例，比如判断是不是一个Object, 用法obj instanceof Obj
11. typeof可以用于判断一个变量的数据类型，比如typeof str == “string”
12. height()和width()方法获得的是元素本身的高和宽，innerHeight()和innerWidth()获得的是包括了padding的高和宽，outerHeight()和outerWidth()获得是包括了border和padding的高和宽，outerHeight(true)和outerWidth(true)获得是包括margin,border和padding的高和宽
13. scroll可以用于注册浏览器或某一节点的滚动条滚动所需要执行的操作
14. resize可以用于注册浏览器大小改变时所需要执行的操作
15. jquery提供的事件操作在注册的时候是增量的，比如有两段代码都是$(window).scroll(function(){}),第二段的function内容不会覆盖到第一段，而是在scroll时，两段代码都被执行
16. animate方法可以对left,top值进行一定时间内的变化，达到动画效果
17. dequene方法可以从动画队列的开头移除一个动画效果，并立即执行它。这样可以保证队列后面的动画不用等待开头的动画，也能执行。
18. is方法可以用来判断一个对象是否满足is方法参数中jquery选择器
19. :visible选择器可以用于获取页面中的可见元素
20. 浏览器间的差异导致在document.ready中的代码获得浏览器可视区域宽高已经滚动条left,top的值不一定都是正确的，因此我们需要保证在这个方法完成之后再来获得这些值。
21. $.browser可以用于判断浏览器的类型，判断方法可以是$.browser.msie == true, 可以使用的是包括$.browser.opera、$.browser.safari、$.browser.mozilla
22. $.browser.version可以判断浏览器的版本号，例如$.browser.version.indexOf(“8”)
分享到：
相关推荐
矢量边界，行政区域边界，精确到乡镇街道，可直接导入arcgis使用
毕业设计
毕业设计
经验贝叶斯EB的简单例子
智慧园区，作为现代城市发展的新形态，旨在通过高度集成的信息化系统，实现园区的智能化管理与服务。该方案提出，利用智能手环、定制APP、园区管理系统及物联网技术，将园区的各类设施与设备紧密相连，形成一个高效、便捷、安全的智能网络。从智慧社区到智慧酒店，从智慧景区到智慧康养，再到智慧生态，五大应用板块覆盖了园区的每一个角落，为居民、游客及工作人员提供了全方位、个性化的服务体验。例如，智能手环不仅能实现定位、支付、求助等功能，还能监测用户健康状况，让科技真正服务于生活。而智慧景区的建设，更是通过大数据分析、智能票务、电子围栏等先进技术，提升了游客的游玩体验，确保了景区的安全有序。 尤为值得一提的是，方案中的智慧康养服务，展现了科技对人文关怀的深刻体现。通过智慧手环与传感器，自动感知老人身体状态，及时通知家属或医疗机构，有效解决了“空巢老人”的照护难题。同时，智慧生态管理系统的应用，实现了对大气、水、植被等环境要素的实时监测与智能调控，为园区的绿色发展提供了有力保障。此外，方案还提出了建立全域旅游营销平台，整合区域旅游资源，推动旅游业与其他产业的深度融合，为区域经济的转型升级注入了新的活力。 总而言之，这份智慧园区建设方案以其前瞻性的理念、创新性的技术和人性化的服务设计，为我们展示了一个充满智慧与活力的未来园区图景。它不仅提升了园区的运营效率和服务质量，更让科技真正融入了人们的生活，带来了前所未有的便捷与舒适。对于正在规划或实施智慧园区建设的决策者而言，这份方案无疑提供了一份宝贵的参考与启示，激发了他们对于未来智慧生活的无限遐想与憧憬。
数学建模相关主题资源2
内容概要：本文围绕SQL在求职和实际工作中的应用展开，详细解析了SQL的重要性及其在不同行业中不可替代的地位。文章首先强调了SQL作为“一切数据工作的起点”，是数据分析、数据挖掘等领域必不可少的技能，并介绍了SQL与其他编程语言在就业市场的对比情况。随后重点探讨了SQL在面试过程中可能出现的挑战与应对策略，具体涉及到询问澄清问题、正确选择JOIN语句类型、恰当使用GROUP BY及相关过滤条件的区别、理解和运用窗口函数等方面，并给出了详细的实例和技巧提示。另外提醒面试者要注意重复值和空值等问题，倡导与面试官及时沟通。文中引用IEEE Spectrum编程语言排行榜证明了SQL不仅广泛应用于各行各业，在就业市场上也最受欢迎。 适用人群：从事或打算转入数据科学领域（包括但不限于数据分析师、数据科学家、数据工程师等职业方向），并对掌握和深入理解SQL有一定需求的专业人士，尤其是正准备涉及SQL相关技术面试的求职者。 使用场景及目标：帮助用户明确在面对复杂的SQL查询题目时能够更加灵活应对，提高解题效率的同时确保准确性；同时让用户意识到SQL不仅仅是简单的数据库查询工具，而是贯穿整个数据处理流程的基础能力之一，进而激发他们进一步探索的热情。 其他说明：SQL在性能方面优于Excel尤其适用于大规模数据操作；各知名企业仍将其视为标准数据操作手段。此外还提供了对初学者友好的建议，针对留学生普遍面临的难题如零散的学习资料、昂贵且效果不佳的付费教程以及难以跟上的纯英教学视频给出了改进的方向。
COMSOL仿真揭示石墨烯临界耦合光吸收特性：费米能级调控下的光学性能探究,COMSOL仿真揭示石墨烯临界耦合光吸收特性：费米能级调控下的光学性能探究,COMSOL 准 BIC控制石墨烯临界耦合光吸收。 COMSOL 光学仿真，石墨烯，光吸收，费米能级可调下图是仿真文件截图，所见即所得。 ,COMSOL; 准BIC; 石墨烯; 临界耦合光吸收; 光学仿真; 费米能级可调。,COMSOL仿真：石墨烯光吸收的BIC控制与费米能级调节
Labview与Proteus串口仿真下的温度采集与报警系统：Keil单片机程序及全套视频源码解析,Labview与Proteus串口仿真温度采集及上位机报警系统实战教程：设定阈值的Keil程序源码分享,labview 和proteus 联合串口仿真 温度采集 上位机报警 设定阈值单片机keil程序 整套视频仿真源码 ,关键词：LabVIEW；Proteus；串口仿真；温度采集；上位机报警；阈值设定；Keil程序；视频仿真源码。,LabVIEW与Proteus联合串口仿真：温度采集与报警系统，Keil程序与阈值设定全套视频源码
整车性能目标书：涵盖燃油车、混动车及纯电动车型的十六个性能模块目标定义模板与集成开发指南,整车性能目标书：涵盖燃油车、混动车及纯电动车型的十六个性能模块目标定义模板与集成开发指南,整车性能目标书，汽车性能目标书，十六个性能模块目标定义模板，包含燃油车、混动车型及纯电动车型。 对于整车性能的集成开发具有较高的参考价值 ,整车性能目标书;汽车性能目标书;性能模块目标定义模板;燃油车;混动车型;纯电动车型;集成开发;参考价值,《汽车性能模块化目标书：燃油车、混动车及纯电动车的集成开发参考》
熵值法stata代码（含stata代码+样本数据） 面板熵值法是一种在多指标综合评价中常用的数学方法，主要用于对不同的评价对象进行量化分析，以确定各个指标在综合评价中的权重。该方法结合了熵值理论和面板数据分析，能够有效地处理包含多个指标的复杂数据。
“电子电路”仿真资源（Multisim、Proteus、PCB等）
在 GEE（Google Earth Engine）中，XEE 包是一个用于处理和分析地理空间数据的工具。以下是对 GEE 中 XEE 包的具体介绍： 主要特性 地理数据处理：提供强大的函数和工具，用于处理遥感影像和其他地理空间数据。 高效计算：利用云计算能力，支持大规模数据集的快速处理。 可视化：内置可视化工具，方便用户查看和分析数据。 集成性：可以与其他 GEE API 和工具无缝集成，支持多种数据源。 适用场景 环境监测：用于监测森林砍伐、城市扩展、水体变化等环境问题。 农业分析：分析作物生长、土地利用变化等农业相关数据。 气候研究：研究气候变化对生态系统和人类活动的影响。
内容概要：本文介绍了C++编程中常见指针错误及其解决方案，并涵盖了模板元编程的基础知识和发展趋势，强调了高效流操作的最新进展——std::spanstream。文章通过一系列典型错误解释了指针的安全使用原则，强调指针初始化、内存管理和引用安全的重要性。随后介绍了模板元编程的核心特性，展示了编译期计算、类型萃取等高级编程技巧的应用场景。最后，阐述了C++23中引入的新特性std::spanstream的优势，对比传统流处理方法展现了更高的效率和灵活性。此外，还给出了针对求职者的C++技术栈学习建议，涵盖了语言基础、数据结构与算法及计算机科学基础领域内的多项学习资源与实战练习。 适合人群：正在学习C++编程的学生、从事C++开发的技术人员以及其他想要深入了解C++语言高级特性的开发者。 使用场景及目标：帮助读者掌握C++中的指针规则，预防潜在陷阱；介绍模板元编程的相关技术和优化方法；使读者理解新引入的标准库组件，提高程序性能；引导C++学习者按照有效的路径规划自己的技术栈发展路线。 阅读建议：对于指针部分的内容，应当结合实际代码样例反复实践，以便加深理解和记忆；在研究模板元编程时，要从简单的例子出发逐步建立复杂模型的理解能力，培养解决抽象问题的能力；而对于C++23带来的变化，则可以通过阅读官方文档并尝试最新标准特性来加深印象；针对求职准备，应结合个人兴趣和技术发展方向制定合理的学习计划，并注重积累高质量的实际项目经验。
JNA、JNI， Java两种不同调用DLL、SO动态库方式读写FM1208 CPU卡示例源码，包括初始化CPU卡、创建文件、修改文件密钥、读写文件数据等操作。支持Windows系统、支持龙芯Mips、LoongArch、海思麒麟鲲鹏飞腾Arm、海光兆芯x86_Amd64等架构平台的国产统信、麒麟等Linux系统编译运行，内有jna-4.5.0.jar包，vx13822155058 qq954486673
内容概要：本文全面介绍了Linux系统的各个方面，涵盖入门知识、基础操作、进阶技巧以及高级管理技术。首先概述了Linux的特点及其广泛的应用领域，并讲解了Linux环境的搭建方法（如使用虚拟机安装CentOS），随后深入剖析了一系列常用命令和快捷键，涉及文件系统管理、用户和权限设置、进程和磁盘管理等内容。此外，还讨论了服务管理的相关指令（如nohup、systemctl）以及日志记录和轮替的最佳实践。这不仅为初学者提供了一个完整的知识框架，也为中级和高级用户提供深入理解和优化系统的方法。 适合人群：适用于有意深入了解Linux系统的学生和专业技术人员，特别是需要掌握服务器运维技能的人群。 使用场景及目标：本文适合初次接触Linux的操作员了解基本概念；也适合作为培训教材，指导学生逐步掌握各项技能。对于有一定经验的技术人员而言，则可以帮助他们巩固基础知识，并探索更多的系统维护和优化可能性。 阅读建议：建议按照文章结构循序渐进地学习相关内容，尤其是结合实际练习操作来加深记忆和理解。遇到复杂的问题时可以通过查阅官方文档或在线资源获得更多帮助。
内容概要：本文档详细介绍了企业在规范运维部门绩效管理过程中所建立的一套绩效考核制度。首先阐述了绩效考核制度设立的目的为确保绩效目标得以衡量与追踪，并确保员工与公司共同成长与发展。其次规定范围覆盖公司所有在职员工，并详细列明了从总经理到一线员工在内的不同角色的职责范围。再则描述了完整的绩效工作流程，即从年初开始制定绩效管理活动计划，经过与每个员工制定具体的绩效目标，在绩效考核周期之内对员工的工作进展和问题解决状况进行持续的监督跟进，并且在每周期结束前完成员工绩效的评估和反馈工作，同时利用绩效评估结果对员工作出保留或异动的相关决定，最后进行绩效管理活动总结以为来年提供参考。此外还强调了整个过程中必要的相关文档保存，如员工绩效评估表。 适合人群：企业管理层，HR专业人士及对现代企业内部运营管理感兴趣的读者。 使用场景及目标：①管理层需要理解如何规范和有效实施企业内部绩效管理，以提高公司运营效率和员工满意度；②HR人士可以通过参考此文档来优化自己公司的绩效管理体系；③对企业和组织管理有兴趣的研究员亦可借鉴。 阅读建议：读者应重点关注各个层级管理者和员工在整个流程中的角色和责任，以期更好地理解
基于MATLAB Simulink的LCL三相并网逆变器仿真模型：采用交流电流内环PR控制与SVPWM-PWM波控制研究,基于MATLAB Simulink的LCL三相并网逆变器仿真模型研究：采用比例谐振控制与交流SVPWM控制策略及参考文献解析,LCL_Three_Phase_inverter：基于MATLAB Simulink的LCL三相并网逆变器仿真模型，交流电流内环才用PR（比例谐振）控制，PWM波采用SVPWM控制，附带对应的参考文献。 仿真条件：MATLAB Simulink R2015b，前如需转成低版本格式请提前告知，谢谢。 ,LCL三相并网逆变器; LCL_Three_Phase_inverter; MATLAB Simulink; PR控制; SVPWM控制; 仿真模型; 参考文献; 仿真条件; R2015b版本,基于PR控制与SVPWM的LCL三相并网逆变器Simulink仿真模型研究
内点法求解标准节点系统最优潮流计算的稳定程序，注释清晰，通用性强,内点法用于标准节点系统的最优潮流计算：稳定、通用且注释清晰的matlab程序,内点法最优潮流程序matlab 采用内点法对14标准节点系统进行最优潮流计算，程序运行稳定，注释清楚，通用性强 ,内点法; 最优潮流程序; MATLAB; 14标准节点系统; 稳定运行; 清晰注释; 通用性强。,Matlab内点法最优潮流程序：稳定高效，通用性强，适用于14节点系统
17suiea3.apk?v=1741006890849