JS广告飘浮
广告飘浮<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>搜狐中国</title>
<script type="text/javascript" language="javascript">
//以下4个变量定义对联广告的初始位置并用initAdv初始化
var advLeft_left = 10;
var advLeft_top = 50;
var advRight_left;
var advRight_top = 50;
function initAdv()
{
var advLeft = document.getElementById("advLeft");
var advRight = document.getElementById("advRight");
advRight_left = document.body.clientWidth - advRight.offsetWidth;
advLeft.style.pixelLeft = advLeft_left;
advLeft.style.pixelTop = advLeft_top;
advRight.style.pixelLeft = advRight_left;
advRight.style.pixelTop = advRight_top;
scrollAdv(); //为了在改变窗口大小时让对联始终可见，调用一下跟随滚动函数
}
//当页面发生滚动时（向上下或向左右），使对联跟随滚动
function scrollAdv()
{
var advLeft = document.getElementById("advLeft");
var advRight = document.getElementById("advRight");
advLeft.style.pixelLeft = document.body.scrollLeft+advLeft_left;
advLeft.style.pixelTop = document.body.scrollTop+advLeft_top;
advRight.style.pixelLeft = document.body.scrollLeft+advRight_left;
advRight.style.pixelTop = document.body.scrollTop+advRight_top;
}
//隐藏对联层函数
function hideAdv(advId)
{
document.getElementById(advId).style.display="none";
}
//飘浮的广告层
var moveX=1; //1为向右，-1为向左
var moveY=1; //1为向下，-1为向上
var delay=5; //过多久移动一次，以ms为单位，值越大越慢
var stepX=2; //一次移动X的像素
var stepY=2; //一次移动Y的像素
var time; //计时器，用来停止或继续飘动
function moveAdv()
{
var adv = document.getElementById("advFloat");
//最右的位置和最下的位置，在此加上了滚动条的滚动量，以使飘浮层始终可见
var maxX = document.body.clientWidth-adv.offsetWidth+document.body.scrollLeft;
var maxY = document.body.clientHeight-adv.offsetHeight+document.body.scrollTop;
//移动飘浮层
adv.style.pixelLeft+=stepX*moveX;
adv.style.pixelTop+=stepY*moveY;
//以下4个if判断当层飘出可视范围时，改变行进方向
if(adv.style.pixelLeft>maxX)
{
adv.style.pixelLeft=maxX;
moveX=-1;
}
if(adv.style.pixelLeft<0+document.body.scrollLeft)
{
adv.style.pixelLeft=0+document.body.scrollLeft;
moveX=1;
}
if(adv.style.pixelTop>maxY)
{
adv.style.pixelTop=maxY;
moveY=-1;
}
if(adv.style.pixelTop<0+document.body.scrollTop)
{
adv.style.pixelTop=0+document.body.scrollTop;
moveY=1;
}
time = setTimeout("moveAdv()",delay);
}
//停止飘浮
function stopMoveAdv()
{
window.clearTimeout(time);
}
//开始漂浮
function startMoveAdv()
{
time = setTimeout("moveAdv()",delay);
}
//验证用户名
function checkUser()
{
var user = document.getElementById("user").value;
var errorUser = document.getElementById("errorUser");
errorUser.innerHTML="";
if(user=="" || user.length==0)
{
errorUser.innerHTML="用户名不能为空！";
return false;
}
var str = /^[a-zA-Z0-9]+$/;
if(!str.test(user))
{
errorUser.innerHTML="用户名只能包含字母和数字！";
return false;
}
return true;
}
//验证密码
function checkPwd()
{
var pwd = document.getElementById("pwd").value;
var errorPwd = document.getElementById("errorPwd");
errorPwd.innerHTML="";
if(pwd=="" || pwd.length==0)
{
errorPwd.innerHTML="密码不能为空！";
return false;
}
var str = /^\w{6,}$/;
if(!str.test(pwd))
{
errorPwd.innerHTML="密码必须是6位以上！";
return false;
}
return true;
}
window.onresize=initAdv; //改变窗口大小时让对联始终可见
window.onscroll=scrollAdv; //滚动时让对联跟随
</script>
</head>
<body style="text-align:center;" onLoad="initAdv();moveAdv()">
<!--广告层开始-->
<div id="advLeft" style="position:absolute; width:118; height:272; text-align:right; background-color:#FBDF1E"><img src="images/adv.jpg" width="118" height="272"><img src="images/closePic.jpg" width="42" height="14" onMouseOver="this.style.cursor='hand'" onClick="hideAdv('advLeft')"></div>
<div id="advRight" style="position:absolute; width:118; height:272; text-align:right; background-color:#FBDF1E"><img src="images/adv.jpg" width="118" height="272"><img src="images/closePic.jpg" width="42" height="14" onMouseOver="this.style.cursor='hand'" onClick="hideAdv('advRight')"></div>
<div id="advFloat" style="position:absolute; top:0; left:0; z-index:3;" onMouseOver="stopMoveAdv()" onMouseOut="startMoveAdv()"><a href="#"><img src="images/advPic.jpg" width="175" height="103" border="0"></a></div>
<!--广告层结束-->
<form name="loginForm" method="post" action="" onsubmit="return checkUser()&&checkPwd()">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="35"> </td>
<td><a href="3">通行证</a> | 用户名：
<input name="user" type="text" id="user" size="16" onblur="checkUser()">
密码：
<input name="pwd" type="password" id="pwd" size="16" onblur="checkPwd()">
<input type="submit" name="Submit" value="登录">
<a href="#">注册</a> <a href="#">帮助</a><br>
<div id="errorUser" style=" position:absolute; color:red; display:inline; "></div>
<div id="errorPwd" style=" position:absolute; color:red; display:inline; "></div></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><img src="images/sohu_back.jpg" width="761" height="616"></td>
<td> </td>
</tr>
</table>
</form>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>
浙公网安备 33010602011771号