本文实例为大家分享了js浮动框的实现代码,供大家参考,具体内容如下
一.在需要加入浮动框的页面中加入如下css代码:
<!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win { border: 1px solid #A67901; background: #EAEAEA; width: 240px; position: absolute; right: 0; font-size: 12px; font-family: Arial; margin: 0px; display: none; overflow: hidden; z-index: 99; } #msg_win .icos { position: absolute; top: 2px; *top: 0px; right: 2px; z-index: 9; } .icos a { float: left; color: #833B02; 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:hover { color: #fff; } #msg_title { background: #BBDEF6; border-bottom: 1px solid #A67901; border-top: 1px solid #FFF; border-left: 1px solid #FFF; color: #000; height: 25px; line-height: 25px; text-indent: 5px; } #msg_content { margin: 5px; margin-right: 0; width: 230px; height: 126px; overflow: hidden; } </style> <!-- 浮动窗口样式css end -->
二.js代码(注意:该代码要添加整个页面最后,目的是页面加载完成时加载它)
<!-- 浮动窗口js,必须要放置到最后 begin--> <script type="text/javascript"> var Message={ set: function() {//最小化与恢复状态切换 var set=this.minbtn.status == 1"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)"htmlcode"><!-- 浮动窗口html代码 begin --> <hr> <div id="msg_win" style="display: block; top: 490px; 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" style="overflow: auto; height: 150px; width: 100%; white-space: nowrap"> ${commonMsg.devRun } </div> </div> <!-- 浮动窗口html代码 end -->以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,浮动框
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“简单实现js浮动框”评论...