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”)
分享到：
相关推荐
基于java的校园美食交流系统设计与实现.docx
均包含代码，文章，部分项目包含ppt
基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip基于python的酒店评论中文情感分析系统源码+设计文档+数据集.zip 个人大四的毕业设计、课程设计、作业、经导师指导并认可通过的高分设计项目，评审平均分达96.5分。主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者，也可作为课程设计、期末大作业。 [资源说明] 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设或者课设、作业，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96.5分，放心下载使用！ 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），供学习参考。
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 、4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、下载 4使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合；、 4下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.m或d论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 、1资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
基于Django框架开发的协同过滤算法小说推荐系统是一种利用用户行为数据来提供个性化小说推荐的应用。该系统通过分析用户的历史阅读记录、评分和反馈，发现用户之间的相似性或小说之间的相似性，进而为用户推荐可能感兴趣的小说。以下是该系统可能包含的关键特性： 1. **用户账户管理**：允许用户创建账户、登录和编辑个人信息，同时跟踪用户的阅读历史和评分。 2. **小说数据库**：构建一个包含大量小说信息的数据库，每本小说都有详细的元数据，如作者、出版年份、流派、标签等。 3. **协同过滤引擎**：实现协同过滤算法，包括用户-用户协同过滤和项目-项目协同过滤，以发现相似用户或相似小说。 4. **推荐生成**：根据协同过滤引擎的结果，生成个性化的小说推荐列表，并提供给用户。 5. **评分系统**：允许用户对小说进行评分，这些评分数据将用于训练推荐算法，提高推荐的准确性。 6. **用户界面**：设计直观、易用的用户界面，使用户能够轻松浏览推荐的小说、查看详情和进行评分。 7. **搜索和筛选功能**：提供强大的搜索功能，允许用户根据标题、作者或流派等关键词搜索小说，并提供筛选
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。、资源 5来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。、资 5源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
内容概要：本文是关于2020年度数字孪生技术的最新进展和发展趋势的研究报告。文中对数字孪生技术及其应用场景作出了详细的阐述，特别强调了数字孪生在智能制造、智慧城市、产品开发等多个领域内的实际应用成果，并讨论了数字孪生带来的信息安全方面的挑战和解决方案。 适用人群：面向希望深入了解和应用数字孪生技术的企业管理人员、研发工程师和学者。 使用场景及目标：适用于企业或机构寻求改进产品设计、生产制造、城市管理等领域效能的情况，助力相关人员理解和实现更加精细的管理决策和模拟预测，进而优化资源配置与提升工作效率。 其它说明：介绍了多项核心技术，包括但不限于数据收集、建模仿真、模型管理系统等，并分享了多个数字孪生的真实应用案例以展示其实效。
基于java的的德云社票务系统的设计与实现.docx
基于java的宜佰丰超市进销存管理系统设计与实现.docx
基于java的削面快餐店点餐服务系统的设计与实现.docx
用户体验分享和讨论.ppt
均包含代码，文章，部分项目包含ppt
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看REaDme.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 、3本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看REAdme.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 、本项3目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看ReAdmE.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
均包含代码，文章，部分项目包含ppt
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
志愿者招募网站，在网站首页可以查看首页，组织信息，志愿活动，新闻资讯，个人中心，后台管理等内容，并进行详细操作 用户注册，在用户注册页面通过填写账号,密码,确认密码，姓名,手机,所在学校，邮箱，验证码等信息进行注册操作 组织信息，在组织信息页面可以查看组织名称，组织编号，组织宣言，负责人，联系电话等内容，并进行评论和收藏操作 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：Vue 关键技术：springboot、SSM、vue、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
全代码在里面，学完Java实训写出来的Java图书馆代码
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。
项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传，可轻松复刻，拿到资料包后可轻松复现出一样的项目，本人系统开发经验充足（全领域），有任何使用问题欢迎随时与我联系，我会及时为您解惑，提供帮助。 【资源内容】：包含完整源码+工程文件+说明（如有）等。答辩评审平均分达到96分，放心下载使用！可轻松复现，设计报告也可借鉴此项目，该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 【提供帮助】：有任何使用问题欢迎随时与我联系，我会及时解答解惑，提供帮助 【附带帮助】：若还需要相关开发工具、学习资料等，我会提供帮助，提供资料，鼓励学习进步 【项目价值】：可用在相关项目设计中，皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面，可借鉴此优质项目实现复刻，设计报告也可借鉴此项目，也可基于此项目来扩展开发出更多功能 下载后请首先打开README文件（如有），项目工程可直接复现复刻，如果基础还行，也可在此程序基础上进行修改，以实现其它功能。供开源学习/技术交流/学习参考，勿用于商业用途。质量优质，放心下载使用。