css如何实现网页内的浮动窗口的最小化和关闭

Posted 2023-03-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css如何实现网页内的浮动窗口的最小化和关闭相关的知识，希望对你有一定的参考价值。

1楼的理解错了，类似有些网站右下角的浮动菜单（或窗口）有的带最小化或关闭，原理实际上是把浮动菜单（或窗口）隐藏或只显示一个小小的长条随着网页的滚动条滚动的 ,JS控制CSS可以实现最小化原理：点击时隐藏大的窗口，再用CSS+div弄个小长条标识显示，点击这个小长条标识可以恢复原来的最大化窗口，隐藏小的CSS标识，功能类似百度知道登陆后显示的好友列表，关闭原理：实际上隐藏了这个浮动的小窗口，也就是隐藏了该DIV层

上代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS+CSS实现可最小化/关闭的右下角浮动窗口</title>
<style type="text/css">
#msg_winposition:absolute;right:0px;display:none;overflow:hidden;z-index:99;border:1px solid #c00;background:#F9EFFC;width:240px;font-size:12px;margin:0px;
#msg_win .icosposition:absolute;top:2px;*top:0px;right:2px;z-index:9;
.icos afloat:left;color:#FFFFFF;margin:1px;text-align:center;font-weight:bold;width:14px;height:22px;line-height:22px;padding:1px;text-decoration:none;font-family:webdings;
.icos a:hovercolor:#FFCC00;
#msg_titlebackground:#AC19E3;border-bottom:1px solid #710B97;border-top:1px solid #FFF;border-left:1px solid #FFF;color:#FFFFFF;height:25px;line-height:25px;text-indent:5px;font-weight:bold;
#msg_contentmargin:5px;margin-right:0;width:230px;height:126px;overflow:hidden;
</style>
</head>
<body>
<div style="height:2000px;"></div>
<div id="msg_win" style="display:block;top:503px;visibility:visible;opacity:1;">
<div class="icos"><a id="msg_min" title="最小化" href="javascript:void 0">_</a><a id="msg_close" title="关闭" href="javascript:void 0">×</a></div>
<div id="msg_title">浮动窗口标题：</div>
<div id="msg_content">浮动窗口内容：欢迎提出宝贵意见，谢谢！</div>
</div>
<script language="javascript">
var Message=
set: function() //最小化与恢复状态切换
var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'恢复'];
this.minbtn.status=set[0];
this.win.style.borderBottomWidth=set[1];
this.content.style.display =set[2];
this.minbtn.innerHTML =set[3]
this.minbtn.title = set[4];
this.win.style.top = this.getY().top;
,
close: function() //关闭
this.win.style.display = 'none';
window.onscroll = null;
,
setOpacity: function(x) //设置透明度
var v = x >= 100 ? '': 'Alpha(opacity=' + x + ')';
this.win.style.visibility = x<=0?'hidden':'visible';//IE有绝对或相对定位内容不随父透明度变化的bug
this.win.style.filter = v;
this.win.style.opacity = x / 100;
,
show: function() //渐显
clearInterval(this.timer2);
var me = this,fx = this.fx(0, 100, 0.1),t = 0;
this.timer2 = setInterval(function()
t = fx();
me.setOpacity(t[0]);
if (t[1] == 0) clearInterval(me.timer2)
,6);//10 to 6
,
fx: function(a, b, c) //缓冲计算
var cMath = Math[(a - b) > 0 ? "floor": "ceil"],c = c || 0.1;
return function() return [a += cMath((b - a) * c), a - b]
,
getY: function() //计算移动坐标
var d = document,b = document.body, e = document.documentElement;
var s = Math.max(b.scrollTop, e.scrollTop);
var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;
var h2 = this.win.offsetHeight;
return foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'
,
moveTo: function(y) //移动动画
clearInterval(this.timer);
var me = this,a = parseInt(this.win.style.top)||0;
var fx = this.fx(a, parseInt(y));
var t = 0 ;
this.timer = setInterval(function()
t = fx();
me.win.style.top = t[0]+'px';
if (t[1] == 0)
clearInterval(me.timer);
me.bind();

,6);//10 to 6
,
bind:function ()//绑定窗口滚动条与大小变化事件
var me=this,st,rt;
window.onscroll = function()
clearTimeout(st);
clearTimeout(me.timer2);
me.setOpacity(0);
st = setTimeout(function()
me.win.style.top = me.getY().top;
me.show();
,100);//600 mod 100
;
window.onresize = function ()
clearTimeout(rt);
rt = setTimeout(function() me.win.style.top = me.getY().top,100);

,
init: function() //创建HTML
function $(id) return document.getElementById(id);
this.win=$('msg_win');
var set=minbtn: 'msg_min',closebtn: 'msg_close',title: 'msg_title',content: 'msg_content';
for (var Id in set) this[Id] = $(set[Id]);
var me = this;
this.minbtn.onclick = function() me.set();this.blur();
this.closebtn.onclick = function() me.close();
this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支持webdings字体
this.minbtn.innerHTML=this.char[0];
this.closebtn.innerHTML=this.char[2];
setTimeout(function() //初始化最先位置
me.win.style.display = 'block';
me.win.style.top = me.getY().foot;
me.moveTo(me.getY().top);
,0);
return this;

;
Message.init();
</script>
</body>
</html>

<br><br><hr> 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p> 参考技术A 不要把只能用脚本搞定的事硬推给CSS……CSS目前还不支持条件判断显示不同的内容……它是标记，不是编程语言的代码…… 参考技术B 用网页中的javascript脚本语言来控制css样式,单是css没有程序办不到参考技术C 用js控制显示隐藏两个层，小长条是一个层。最大化是一个层

这只是我的一个想法。

今天看一个demo 仿新浪博客右下角弹出的滚动窗口，应该对你有帮助。http://bbs.blueidea.com/thread-2846972-1-1.html
今天我一直在搞这个。我疯掉了。

希望大家能探讨一下。本回答被提问者采纳参考技术D 最小化：（只支持IE）
<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">
<param name="Command" value="Minimize"></object>
<input type=button value=最小化 onclick=hh1.Click()>

关闭按钮：
<a href="#" onclick=window.close();return false)>关闭本窗口</a><br>

电脑上不管开啥窗口最小化，关闭都会卡在屏幕上。

参考技术A

电脑上不管开什么窗口最小化，关闭都会卡在屏幕上。

显卡的显存小了,一般是电脑过热的问题
麻烦采纳，谢谢!

电脑文件最小化后文件卡在屏幕上

偶尔会出现这种情况，多半是当时正在最小化的文件占用资源较多。或者是正好显卡处理到那出错了。
一般重启或注销就没事了。
你可以试试按f5刷新页面试试。

窗口最小化不了？最小化了还显示在屏幕上，是什么原因。与显卡有关系吗？

首先你的显卡要支持视频输出
就是显卡上有一个视频端子，
其次要有一个转接线，插上就可以了
OK

为什么电脑的显示屏在开网页是会卡住且开的网页不管是最小化还是关闭都会留在屏幕上连刷新都不行

很有可能是系统垃圾太多造成的，用安全卫士清理下系统垃圾试试，如果还不行就可能是硬盘的问题了

网页关闭和最小化会卡住中间部分类容会在屏幕上怎么解决~

1 关闭一些不常用的软件。
2 更换电脑显卡；
3 更换电脑；

玩cs时怎样最小化窗口？屏幕上没有按钮啊

其实在玩CS途中不建议最小化，因为最小化后再返回游戏，游戏的声音就完全没了，不过你想最小化可以用ALT+TAB切换

让所有最小化的窗口都显示在屏幕上的快捷键是什么？

用Win+M键
xp快捷键大全
F1 显示当前程序或者windows的帮助内容。
F2 当你选中一个文件的话，这意味着“重命名”
F3 当你在桌面上的时候是打开“查找：所有文件” 对话框
F10或ALT 激活当前程序的菜单栏
windows键或CTRL+ESC 打开开始菜单
CTRL+ALT+DELETE 在win9x中打开关闭程序对话框
DELETE 删除被选择的选择项目，如果是文件，将被放入回收站
SHIFT+DELETE 删除被选择的选择项目，如果是文件，将被直接删除而
不是放入回收站
CTRL+N 新建一个新的文件
CTRL+O 打开“打开文件”对话框
CTRL+P 打开“打印”对话框
CTRL+S 保存当前操作的文件
CTRL+X 剪切被选择的项目到剪贴板
CTRL+INSERT 或 CTRL+C 复制被选择的项目到剪贴板
SHIFT+INSERT 或 CTRL+V 粘贴剪贴板中的内容到当前位置
ALT+BACKSPACE 或 CTRL+Z 撤销上一步的操作
ALT+SHIFT+BACKSPACE 重做上一步被撤销的操作
Windows键+M 最小化所有被打开的窗口。
Windows键+SHIFT+M 重新将恢复上一项操作前窗口的大小和位置
Windows键+E 打开资源管理器
Windows键+F 打开“查找：所有文件”对话框
Windows键+R 打开“运行”对话框
Windows键+BREAK 打开“系统属性”对话框
Windows键+CTRL+F 打开“查找：计算机”对话框
SHIFT+F10或鼠标右击打开当前活动项目的快捷菜单
SHIFT 在放入CD的时候按下不放，可以跳过自动播放CD。在打
开word的时候按下不放，可以跳过自启动的宏
ALT+F4 关闭当前应用程序
ALT+SPACEBAR 打开程序最左上角的菜单
ALT+TAB 切换当前程序
ALT+ESC 切换当前程序
ALT+ENTER 将windows下运行的MSDOS窗口在窗口和全屏幕状态间切换
PRINT SCREEN 将当前屏幕以图象方式拷贝到剪贴板
ALT+PRINT SCREEN 将当前活动程序窗口以图象方式拷贝到剪贴板
CTRL+F4 关闭当前应用程序中的当前文本（如word中）
CTRL+F6 切换到当前应用程序中的下一个文本
（加shift 可以跳到前一个窗口）
在IE中：
显示前一页（前进键） ALT+RIGHT ARROW
显示后一页（后退键） ALT+LEFT ARROW
在页面上的各框架中切换（加shift反向）CTRL+TAB
刷新 F5
强行刷新 CTRL+F5
激活程序中的菜单栏 F10
执行菜单上相应的命令 ALT+菜单上带下划线的字母
关闭多文档界面程序中的当前窗口 CTRL+ F4
关闭当前窗口或退出程序 ALT+ F4
复制 CTRL+ C
剪切 CTRL+ X
粘贴 CTRL+ V
删除 DELETE
撤消 CTRL+ Z
显示所选对话框项目的帮助 F1
显示当前窗口的系统菜单 ALT+空格键
显示所选项目的快捷菜单 SHIFT+ F10
显示“开始”菜单 CTRL+ ESC
显示多文档界面程序的系统菜单 ALT+连字号(-)
切换到上次使用的窗口按住ALT然后重复按TAB，
切换到另一个窗口 ALT+ TAB
-----------------------------------------------------------------------
二、使用“Windows资源管理器”的快捷键
NUM LOCK+负号(=) 如果当前选择展开了,要折叠或者选择父文件夹左箭头折叠所
选的文件夹
NUM LOCK+* 如果当前选择折叠了,要展开或者选择第一个子文件夹右箭头
展开当前选择下的所有文件夹
NUM LOCK+加号(+) 展开所选的文件夹
F6 在左右窗格间切换
------------------------------------------------------------------------
三、使用 WINDOWS键
可以使用 Microsoft自然键盘或含有 Windows徽标键的其他任何兼容键盘的以下快捷键。
在任务栏上的按钮间循环 WINDOWS+ TAB
显示“查找：所有文件” WINDOWS+ F
显示“查找：计算机” CTRL+ WINDOWS+ F
显示“帮助” WINDOWS+ F1
显示“运行”命令 WINDOWS+ R
显示“开始”菜单 WINDOWS
显示“系统属性”对话框 WINDOWS+ BREAK
显示“Windows资源管理器” WINDOWS+ E
最小化或还原所有窗口 WINDOWS+ D
撤消最小化所有窗口 SHIFT+ WINDOWS+ M
------------------------------------------------------------------------
四、使用“我的电脑”和“Windows资源管理器”的快捷键
关闭所选文件夹及其所有父文件夹
按住 SHIFT键再单击“关闭按钮（仅适用于“我的电脑”）
向后移动到上一个视图 ALT+左箭头
向前移动到上一个视图 ALT+右箭头
查看上一级文件夹 BACKSPACE
----------------------------------------------------------------------
五、使用对话框中的快捷键
取消当前任务 ESC
如果当前控件是个按钮，要单击该按钮。
如果当前控件是个复选框，要选择或清除该复选框
或者如果当前控件是个选项按钮，要单击该选项空格键
单击相应的命令 ALT+带下划线的字母
单击所选按钮 ENTER
在选项上向后移动 SHIFT+ TAB
在选项卡上向后移动 CTRL+ SHIFT+ TAB
在选项上向前移动 TAB
在选项卡上向前移动 CTRL+ TAB
如果在“另存为”或“打开”对话框中选择了某文件夹，要打开上一级文件夹
BACKSPACE
在“另存为”或“打开”对话框中打开“保存到”或“查阅” F4
刷新“另存为”或“打开”对话框 F5
-----------------------------------------------------------------------
六、使用“桌面”、“我的电脑”和“Windows资源管理器”快捷键
插入光盘时不用“自动播放”功能按住 SHIFT插入 CD-ROM
复制文件按住CTRL拖动文件
创建快捷方式按住 CTRL+SHIFT拖动文件
立即删除某项目而不将其放入回收站 SHIFT+DELETE
显示“查找：所有文件” F3
显示项目的快捷菜单 APPLICATION键
刷新窗口的内容 F5
重命名项目 F2
选择所有项目 CTRL+ A
查看项目的属性 ALT+ ENTER或 ALT+双击
----------------------------------------------------------------------
七、Microsoft放大程序的快捷键
Windows+PRINT SCREEN 将屏幕复制到剪贴板（包括鼠标光标）
Windows+SCROLL LOCK 将屏幕复制到剪贴板（不包括鼠标光标）
Windows+PAGE UP 切换反色。
Windows+ PAGE DOWN 切换跟随鼠标光标
Windows+向上箭头增加放大率
Windows+向下箭头减小放大率
---------------------------------------------------------------------
八、使用辅助选项快捷键
切换筛选键开关右SHIFT八秒
切换高对比度开关左ALT+左SHIFT+PRINT SCREEN
切换鼠标键开关左ALT+左SHIFT+NUM LOCK
切换粘滞键开关 SHIFT键五次
切换切换键开关 NUM LOCK五秒
-----------------------------------------------------------------
Win XP 键盘快捷键概述
Ctrl + C 复制。
Ctrl + X 剪切。
Ctrl + V 粘贴。
Ctrl + Z 撤消。
DELETE 删除。
Shift + Delete 永久删除所选项，而不将它放到“回收站”中。
拖动某一项时按 CTRL 复制所选项。
拖动某一项时按 CTRL + SHIFT 创建所选项目的快捷键。
F2 重新命名所选项目。
CTRL + 向右键将插入点移动到下一个单词的起始处。
CTRL + 向左键将插入点移动到前一个单词的起始处。
CTRL + 向下键将插入点移动到下一段落的起始处。
CTRL + 向上键将插入点移动到前一段落的起始处。
CTRL + SHIFT + 任何箭头键突出显示一块文本。
SHIFT + 任何箭头键在窗口或桌面上选择多项，或者选中文档中的文本。
Ctrl + A 选中全部内容。
F3 搜索文件或文件夹。
Alt + Enter 查看所选项目的属性。
Alt + F4 关闭当前项目或者退出当前程序。
ALT + Enter 显示所选对象的属性。
Alt + 空格键为当前窗口打开快捷菜单。
Ctrl + F4 在允许同时打开多个文档的程序中关闭当前文档。
Alt + Tab 在打开的项目之间切换。
Alt + Esc 以项目打开的顺序循环切换。
F6 在窗口或桌面上循环切换屏幕元素。
F4 显示“我的电脑”和“Windows 资源管理器”中的“地址”栏列表。
Shift + F10 显示所选项的快捷菜单。
Alt + 空格键显示当前窗口的“系统”菜单。
Ctrl + Esc 显示“开始”菜单。
ALT + 菜单名中带下划线的字母显示相应的菜单。
在打开的菜单上显示的命令名称中带有下划线的字母执行相应的命令。
F10 激活当前程序中的菜单条。
右箭头键打开右边的下一菜单或者打开子菜单。
左箭头键打开左边的下一菜单或者关闭子菜单。
F5 刷新当前窗口。
BackSpace 在“我的电脑”或“Windows 资源管理器”中查看上一层文件夹。
Esc 取消当前任务。
将光盘插入到 CD-ROM 驱动器时按 SHIFT 键阻止光盘自动播放。
二、对话框快捷键
Ctrl + Tab 在选项卡之间向前移动。
Ctrl + Shift +Tab 在选项卡之间向后移动。
Tab 在选项之间向前移动。
Shift + Tab 在选项之间向后移动。
ALT + 带下划线的字母执行相应的命令或选中相应的选项。
Enter 执行活选项动或按钮所对应的命令。
空格键如果活选项动是复选框，则选中或清除该复选框。
箭头键活选项动是一组选项按钮时，请选中某个按钮。
F1 显示帮助。
F4 显示当前列表中的项目。
BackSpace 如果在“另存为”或“打开”对话框中选中了某个文件夹，则打开上一级文件夹。
三、自然键盘快捷键
WIN 显示或隐藏"开始"菜单。
WIN+ BREAK 显示"系统属性"对话框。
WIN+ D 显示桌面。
WIN+ M 最小化所有窗口。
WIN+ Shift + M 还原最小化的窗口。
WIN+ E 打开"我的电脑"。
WIN+ F 搜索文件或文件夹。
CTRL+WIN+ F 搜索计算机。
WIN+ F1 显示 Windows 帮助。
WIN+ L 如果连接到网络域，则锁定您的计算机，或者如果没有连接到网络域，则切换用户。
WIN+ R 打开"运行"对话框。
KEY 显示所选项的快捷菜单。
WIN+ U 打开"工具管理器"。
四、辅助键盘快捷键
右侧 SHIFT 键八秒钟切换“筛选键”的开和关。
左边的 ALT + 左边的 SHIFT + PRINT SCREEN 切换“高对比度”的开和关。
左边的 ALT + 左边的 SHIFT + NUM LOCK 切换“鼠标键”的开和关。
Shift 键五次切换“粘滞键”的开和关。
Num Lock 键五秒钟切换“切换键”的开和关。
WIN+ U 打开“工具管理器”。
五、“Windows 资源管理器”键盘快捷键
按键目的
END 显示当前窗口的底端。
主页显示当前窗口的顶端。
NUM LOCK + 数字键盘的星号 (*) 显示所选文件夹的所有子文件夹。
NUM LOCK + 数字键盘的加号 (+) 显示所选文件夹的内容。
NUM LOCK + 数字键盘的减号 (-) 折叠所选的文件夹。
左箭头键当前所选项处于展开状态时折叠该项，或选定其父文件夹。
右箭头键当前所选项处于折叠状态时展开该项，或选定第一文件夹。
----------------------------------------------
Windows系统的另类快捷键
Windows中的快捷键我们都很熟悉了，可是下面这些快捷键你平时用过吗？与普通的快捷键相比，它们的使用方法有些特别：这些键不能同时按下，而是要用两步或三步的连续操作，才能实现一项功能。虽然如此，使用这些快捷键也比使用鼠标方便。
Alt+空格→X 最大化当前窗口
Alt+空格→N 最小化当前窗口
提示：“Alt＋空格→X”表示先按下“Alt＋空格”组合键，然后松开组合键，再按下X键。下面“→”符号均表示先松开符号前按下的键，再按下符号后面的键。
在桌面或文件夹窗口中可使用以下快捷键（注意是文件夹窗口而不是具体的文件夹）：
右键→I→N 按名称排列图标
右键→I→T 按类型排列图标（呵呵，搞IT的应该记得住吧）
右键→I→Z 按大小排列图标
右键→I→D 按日期排列图标
右键→N→F 新建文件夹
右键→R 若在桌面则打开“显示属性”在文件夹则打开该文件夹的属性
右键→F 刷新当前窗口，效果等同F5
提示：这里的“右键”指的是主键盘区最下排右侧的Windows徽标键和Ctrl之间的那个键。
如果当前窗口是某个具体文件或文件夹：
右键→S 创建当前文件或目录的快捷方式
右键→R 查看当前文件或目录属性（相当于Alt+Enter）
右键→O 打开当前文件或目录（相当于回车）
右键→T→A 发送当前文件或目录到软盘
注意：有些软件可能会在右键里增加一些菜单，这些菜单的快捷键可能会与系统快捷键发生冲突。比如WinRAR会在文件或文件夹的右键菜单中增加一个“添加到”的菜单，该菜单的快捷键S会与系统右键菜单“创建快捷方式（S）”发生冲突。如果要去掉这些“外来”的右键菜单，我们可以打开WinRAR，在菜单栏上依次点击“选项→设置”，打开“设置”对话框，在“综合”选项卡中点击“选择关联菜单项目”按钮，在打开的对话框中清空所有选项前的复选框即可。
如果当前窗口是记事本：
右键→U 撤消操作，效果等同与Ctrl+Z
右键→P 粘贴，效果等同与Ctrl+V
右键→A 选中全部文字，效果等同于Ctrl+A
其实，这些快捷键大家都可以在相关程序的右键菜单中找到，在这里只是选择了几个比较实用的归纳了一下，你也可以自己研究。比如当前窗口是某个文件或文件夹，那么用“右键→M”就可以对该文件或文件夹进行重命名操作。不同的程序有不同的快捷键，大家可以自己研究试用，举一反三。