弹屏js及html

最新推荐文章于 2023-11-01 02:19:02 发布

原创最新推荐文章于 2023-11-01 02:19:02 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#function #div #stylesheet #browser #border #microsoft

本文介绍了一种网页开发中的弹屏通知实现方法，包括显示、关闭、最小化及拖动调整位置等功能。通过JavaScript和CSS实现了弹屏在滚动时自动缩小并固定于屏幕右下角的效果。

web开发中，在基于服务器推技术时一般会在发生某种事件时产生弹屏，以通知用户发生了某件事。比如是有人上线，有一个电话打进来，接线员客户端就要弹出当前进来用户的信息。下面是一个简单的弹屏代码，并能在滚动屏幕时缩小并放在浏览器的右下角：

<html> <head> <title>内容填写</title> <mce:style type="text/css" rel="stylesheet"></mce:style><style type="text/css" rel="stylesheet" mce_bogus="1"> #movediv { width:680px; height:488px; position:absolute; line-height:100px; left:100px; top:10px; border:3px solid RGB(105, 105, 105); z-index:1002; display:none; } #show_div_head { background-color:RGB(58, 58, 58); height:35px; cursor:move; margin:1px; margin-top:2px; float:left; width:100%; } #show_div_head table{ width:100%; float:right; } #show_div_head .cursorClass{ /*border:1px solid white;*/ cursor:default; color:white; } .black_overlay { display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color:white; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } </style> <mce:script language="javascript" type="text/javascript"></mce:script> </head> <body> <input type="button" value="show" onclick="clickShow();"/> <div id="movediv" style="left:20px;top:20px;"> <div id="show_div_head" onmousedown="moveInit('movediv',event);" onmousemove="Move('movediv',event)" onmouseup="stopMove()" onmouseout="stopMove()"> <table> <tr> <td width="90%" style="color:white;" mce_style="color:white;">Edit</td> <td onclick="toMin();" class="cursorClass"> -- </td> <td onclick="clickClose();" class="cursorClass"> X </td> </tr> </table> </div> <div id="show_div_body"> bbbbbbbb </div> <div id="show_div_foot"> <hr style="border:1px dotted gray;" mce_style="border:1px dotted gray;"/> </div> </div>   <input type="button" value="show" onclick="clickShow();"/> </body> </html>