右下角弹出窗

最新推荐文章于 2025-08-07 14:42:17 发布

原创最新推荐文章于 2025-08-07 14:42:17 发布 · 663 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #timer #button #xhtml #javascript #scroll

本文介绍了一种改进的右下角弹窗视频播放方式，通过JavaScript实现视频播放器在页面下方渐显渐隐的效果。解决了网页加入DOCTYPE后导致的问题，并通过引入AlertBox库优化了显示和关闭体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求弹出右下角的视频播放

找到以下代码

<body scroll=no>
<script language="JavaScript">
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){}
//短信提示使用(asilas添加)
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;
function getMsg()
{
try{
divTop = parseInt(document.getElementById("eMeng").style.top,10)
divLeft = parseInt(document.getElementById("eMeng").style.left,10)
divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight
document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth
document.getElementById("eMeng").style.visibility="visible"
objTimer = window.setInterval("moveDiv()",10)
}
catch(e){}
}

function resizeDiv()
{
i+=1
if(i>5000) closeDiv()//修改这个数字以改变窗口存活期，越大存活期越长。
try{
divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)
divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)
docWidth = document.body.clientWidth;
docHeight = document.body.clientHeight;
document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)
document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)
}
catch(e){}
}

function moveDiv()
{
try
{
if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
{
window.clearInterval(objTimer)
objTimer = window.setInterval("resizeDiv()",1)
}
divTop = parseInt(document.getElementById("eMeng").style.top,10)
document.getElementById("eMeng").style.top = divTop - 1
}
catch(e){}
}
function closeDiv()
{
document.getElementById('eMeng').style.visibility='hidden';
if(objTimer) window.clearInterval(objTimer)
}
</script>
<DIV id=eMeng style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d3f3">
<TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing=0 cellPadding=0 width="100%" bgColor=#cfdef4 border=0>
<TBODY>
<TR>
<TD width=161 height=24 style="FONT-SIZE: 12px; BACKGROUND-IMAGE: url(msgTopBg.gif); COLOR: #0f2c8c;padding-left:10px">视频 </TD>
<TD style="BACKGROUND-IMAGE: url(msgTopBg.gif); PADDING-TOP: 2px;PADDING-right:2px" vAlign=center align=right width=19><span title=关闭 style="CURSOR: hand;color:red;font-size:12px;font-weight:bold;margin-right:4px;" onclick=closeDiv() >×</span></TD>
</TR>
<TR>
<TD style="PADDING-RIGHT: 1px; BACKGROUND-IMAGE: url(1msgBottomBg.jpg); PADDING-BOTTOM: 1px" colSpan=2 height=90>
<object><param name="allowScriptAccess" value="always"></param><param name="wmode" value="transparent"></param><param name="movie" value="http://192.168.12.30:9998/website/swf/player.swf?type=http&file=test1.flv"></param><embed src="http://192.168.12.30:9998/website/swf/player.swf?type=http&file=test1.flv" width="300" height="200" allowScriptAccess="always" wmode="transparent" type="application/x-shockwave-flash" /></object></td>
</TR>
</TBODY>
</TABLE>
</DIV>
</body>
</html>

单独执行没有问题，加入到首页之后，由于网页包含<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">死活不行，删除之后正常显示，可是样式又不正确。后来发现加上网路的dtd协议，document.body.scrollTop始终为0。

后来搜索到AlertBox，没有以上问题，但是其显示不是慢慢出来的效果，而是直接出来，并且关闭时速度太慢。于是修改下面的js

<input type="button" value=" 右下角弹窗效果 " id="idBoxOpen2" />
<dl id="idBox2" class="lightbox">
<dt><b>右下角消息框</b> </dt>
<dd>
  <input type="button" value=" 下滚渐隐 " id="idBoxClose2" />
</dd>
</dl>
<script>
(function(){
//右下角消息框
var timer, target, current,
ab = new AlertBox( "idBox2", {
fixed: true,
  onShow: function(){
   clearTimeout(timer);
   this.box.style.bottom =-100 ;
   this.box.style.right = 0;
  },
  onClose: function(){ clearTimeout(timer); }
});

})()
</script>