您的位置：首页 > 编程语言 > Java开发

java/js 右下脚浮动小窗口，慢慢上升，类似于广告窗口

2010-09-11 21:57 316 查看
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="JavaScript">
<!--
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer;
function getMsg()
{
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 + parseInt(document.body.scrollTop,10) + 5;
document.getElementById("eMeng").style.left = docWidth + parseInt(document.body.scrollLeft,10) - divWidth ;
document.getElementById("eMeng").style.visibility="visible";
objTimer = window.setInterval("moveDiv()",10);
}

//右下脚小窗口慢慢上升
function moveDiv(){
if(parseInt(document.getElementById("eMeng").style.top,10) < (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
{
window.clearInterval(objTimer);
return;
}
divTop = parseInt(document.getElementById("eMeng").style.top,10);
document.getElementById("eMeng").style.top = divTop - 2;
}

function resizeDiv()
{
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 + parseInt(document.body.scrollTop,10) - divHeight ;
document.getElementById("eMeng").style.left = docWidth + parseInt(document.body.scrollLeft,10) - divWidth;
}

function closeDiv()
{
document.getElementById('eMeng').style.visibility="hidden";
if(objTimer) window.clearInterval(objTimer);
}

window.onload = getMsg;
window.onresize = resizeDiv;
window.onscroll = resizeDiv;
-->
</script>
<body style="font-size:12px;">
<div id="eMeng" style="border:1px solid #7788CC;visibility:hidden;position:absolute;top:0px;left:0px;height:150px;width:260px;">
<div style="background-color:#7788FF;width:260px;height:20px;">
<div style="cursor:hand;font-size:12px;font-weight:bold;text-align:right;" onClick="closeDiv()">×</div>
</div>
<!--设计浮动窗口-->
<div style="border:3px solid #BBCCFF;background-color:#D5E7FD;width:260px;height:130px;">
<center>
<div id="myform">
这里设计想要的表单
<form name="myform" method="post">
<p>姓名:<input type="text"/></p>
<p>QQ: <input type="text"/></p>
<p>电话: <input type="text"/></p>
<p> <input type="submit" value="提交"/></p>
</form>

</div>
</center>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航