首页 > 代码库 > 简单的浮动窗口
简单的浮动窗口
简单的浮动代码，纯js代码，但不符合w3c标准，在有些HTML规范下不可行，
例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
具体原因不清楚，待大神告知。
完整代码如下（字母为背景测试）：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>带关闭按钮的浮动窗口</title> </head> <style type="text/css"> #fdck {border:1px solid #c0c0c0;margin:0 auto;padding:5px;background:#f0f0f0} </style> <body> <div id="img" style="position: absolute; left: 311; top: 815;visibility :hidden;" onm ouseover="clearInterval(interval)" onm ouseout="interval = setInterval(‘changePos()‘, delay)" align="middle"> <span style="CURSOR:hand;color:red;font-weight:bold;font-size:12px" onclick="clearInterval(interval);img.style.visibility = ‘hidden‘">关闭</span> <div id="fdck" style=“border:1px;background:orange;”> 我是一个简单的浮动窗口 </div> </div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <div>advadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvadddddddddddddddddddddddadvadvadadvadvadvadvaddddddddddddddddddddddd</div> <script language=javascript> var xPos = 20; var yPos = document.body.clientHeight; var step = 1; var delay = 30; var height = 0; var Hoffset = 0; var Woffset = 0; var yon = 0; var xon = 0; var pause = true; var interval; img.style.top = yPos; function changePos() { width = document.body.clientWidth; height = document.body.clientHeight; Hoffset = img.offsetHeight; Woffset = img.offsetWidth; img.style.left = xPos + document.body.scrollLeft; img.style.top = yPos + document.body.scrollTop; if (yon) { yPos = yPos + step; } else { yPos = yPos - step; } if (yPos < 0) { yon = 1; yPos = 0; } if (yPos >= (height - Hoffset)) { yon = 0; yPos = (height - Hoffset); } if (xon) { xPos = xPos + step; } else { xPos = xPos - step; } if (xPos < 0) { xon = 1; xPos = 0; } if (xPos >= (width - Woffset)) { xon = 0; xPos = (width - Woffset); } } function start() { img.style.visibility = "visible"; interval = setInterval(‘changePos()‘, delay); } start(); </script> </body> </html>
简单的浮动窗口
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。