今天学习了如何制作网站上得浮动窗口
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<!-- 浮动层 -->
<div id="ad" style=" position:absolute;">
<a href="http://www.baidu.com">
<img src="http://csdnimg.cn/www/images/csdnindex_logo.gif" width="220" height="95" border="0">
</a>
</div>
<script type="text/javascript">
//定义浮动初始位置
var x=50,y=50;
//定义浮动层每次移动的幅度
var step=1; //单位为像素
//定义浮动层每次移动的时间间隔
var delay=10; //单位为毫秒
//判断横、纵坐标是否在范围内
var x_flag=true;
var y_flag=true;
//获取浮动层对象
var floatObj=document.getElementById("ad");
function floatAD(){
//上、下、左、右四个边界点
var top_border=0;
var bottom_border=document.documentElement.clientHeight-floatObj.offsetHeight;
var left_border=0;
var right_border=document.body.clientWidth-floatObj.offsetWidth;
//实现移动,移动的过程其实就是x轴移动一个幅度,y轴移动一个幅度,这里要注意超出边界范围的时候如何处理
floatObj.style.left = x + document.body.scrollLeft //更新层的X坐标,实现X轴方向上的运动;document.body.scrollLeft为文档区域的滚动条向右拉的距离,以保证在滚动条右拉时层仍在可见范围内
floatObj.style.top = y + document.body.scrollTop //更新层的Y坐标,实现Y轴方向上的运动;document.body.scrollTop为文档区域的滚动条向下拉的距离,以保证在滚动条下拉时层仍在可见范围
x = x+step*(x_flag?1:-1);
if(x<left_border){
x_flag=true;
x=left_border;
}
if(x>right_border){
x_flag=false;
x=right_border;
}
y = y+step*(y_flag?1:-1);
if(y<top_border){
y_flag=true;
y=top_border;
}
if(y>bottom_border){
y_flag=false;
y=bottom_border;
}
}
var move = setInterval("floatAD()",delay);
//鼠标进入图片停止移动
floatObj.onmouseover=function(){
clearInterval(move);
}
floatObj.onmouseout=function(){
move=setInterval("floatAD()",delay);
}
</script>
</body>
</html>
变量解释说明:
浏览器相当于一个坐标轴,左顶点相当于起点(0,0),x轴为横轴,y轴为纵轴
(1)x,y变量:定位浮动层初始位置
(2)Step变量:定位每次图片移动的距离,数值越大,移动的幅度就越大
(3)Daley变量:设置移动图片的间隔时间,数值越小,移动的速度就越慢
(4)x_flag , y_flag:用于判断是否超出边界值
(5)floatObj :浮动层对象
(6)top_border , bottom_border , left_border, right_border :分别为上、下、左、右四个边界。
其中上边界和左边界肯定为0,下边界为浏览器的可见高度—浮动层的高度,右边界为浏览器的可见宽度—浮动层的宽度。
编程注意事项:
(1)浮动层必须是绝对定位
(2)移动浮动层其实就是改变浮动层x,y轴的坐标位置
(3)在浮动层到达边界点的时候,需要进行往返运动处理
(4)当鼠标停留在浮动层上的时候,需要对间隔执行事件进行清理
(5)当鼠标跳出浮动层的时候,需要重新设置间隔执行时间