漂浮DIV“窗口”(或漂浮广告)——fireFox、IE下均适用
//HTML
<div id="opwindow" class="login" style="display: none">
<div id="opwindowtitle">
<div id="optitle" class="logintitlestr">
会员登录</div>
<div id="closeopwindow" onclick="closewindow()" onmouseover="overclose(this)" onmouseout="outclose(this)">
×</div>
</div>
<div id="opcontent">
</div>
</div>
//CSS
略
//JS:
var ww="窗口"宽度;//不带px,纯数字
var wh="窗口"高度;//不带px,纯数字
//移动窗口
function moveWindow(winname)
{
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
var isXhtml = (h2<=h1&&h2!=0)?true:false; //判断当前页面的Doctype是否为Xhtml
var body = isXhtml?document.documentElement:document.body;
var o=document.getElementById(winname);
var lf=(body.clientWidth-ww)/2-50;
o.style.left=lf+"px";
o.style.top=(document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop) +
((document.documentElement.clientHeight == 0)?document.body.clientHeight:document.documentElement.clientHeight)
-wh-200+'px';
if(o.style.display=="")
setTimeout("moveWindow('"+winname+"')",20);
}
function closewindow()
{
document.getElementById("login").style.display="none";
document.getElementById("opwindow").style.display="none";
}
function overclose(o)
{
o.style.backgroundColor="#F6F2EA";
o.style.color="#F10000";
}
function outclose(o)
{
o.style.backgroundColor="#D4D0C8";
o.style.color="#000000";
}
<div id="opwindow" class="login" style="display: none">
<div id="opwindowtitle">
<div id="optitle" class="logintitlestr">
会员登录</div>
<div id="closeopwindow" onclick="closewindow()" onmouseover="overclose(this)" onmouseout="outclose(this)">
×</div>
</div>
<div id="opcontent">
</div>
</div>
//CSS
略
//JS:
var ww="窗口"宽度;//不带px,纯数字
var wh="窗口"高度;//不带px,纯数字
//移动窗口
function moveWindow(winname)
{
var h1 = document.body.clientHeight;
var h2 = document.documentElement.clientHeight;
var isXhtml = (h2<=h1&&h2!=0)?true:false; //判断当前页面的Doctype是否为Xhtml
var body = isXhtml?document.documentElement:document.body;
var o=document.getElementById(winname);
var lf=(body.clientWidth-ww)/2-50;
o.style.left=lf+"px";
o.style.top=(document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop) +
((document.documentElement.clientHeight == 0)?document.body.clientHeight:document.documentElement.clientHeight)
-wh-200+'px';
if(o.style.display=="")
setTimeout("moveWindow('"+winname+"')",20);
}
function closewindow()
{
document.getElementById("login").style.display="none";
document.getElementById("opwindow").style.display="none";
}
function overclose(o)
{
o.style.backgroundColor="#F6F2EA";
o.style.color="#F10000";
}
function outclose(o)
{
o.style.backgroundColor="#D4D0C8";
o.style.color="#000000";
}
分类:
JAVASCRIPT
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· Open-Sora 2.0 重磅开源!