浮动 div
我们在网上经常看到有的网页上有一块内容，不管垂直滚动条如何翻动网页，始终在屏幕上的同一位置，我把它称为“浮动层”，因为它看起来象在网页上似的（你看右上角那个黄色的菜单条，就是下面两个例子所做来的效果）。制作这种效果要借助于Javascript，我在这里给你介绍两种制作方法，一种在改变例子中提供的样式时，需要手动编写代码，适合于对HTML熟悉的朋友；另一种方法在改变例子中提供的样式时，只要在Dreamweaver中对图层上内容进行编辑，无需编写源代码，所以比较方便。
一、浮动图层制作方法一
1、把下面这段Javascript程序复制到网页源代码的<head>与</head>之间：
<script language="javascript">
function myload()
{
mydiv.style.top=108;
mydiv.style.left=window.screen.width-100
mymove();
}
var a
var b=10 // 改变b的值，将改变浮动图层离左边界的距离
var x=0
function mymove()
{
window.screen.width>800 ? A=50:a=10
{
mydiv.style.top=document.body.scrollTop+a // 改变a的值，将改变浮动图层离上边界的距离
mydiv.style.left=b
setTimeout("mymove();",1) // 这个函数设置的是浮动图层移动的时间，张二个参数越大，移动得越慢。
}
}
</script>
2、把下面这段Javascript程序复制到网页源代码的<body>与</body>之间：
<script language=javascript>
{
document.write("<div id='mydiv' style=' position: absolute; width:180;top:100;left:578;visibility: visible;z-index: 1'> <table width='100%' border='2' cellpadding='2' cellspacing='2' bordercolorlight='#FFFF66' bordercolordark='#33FF33'><tr><td><p><a href='../home2.htm'>返回</a></p></td> <td><a href='../hylayer_2.htm'>上一页</a></td> <td><a href='../hylayer_4.htm'>下一页</a></td> <td><a href='#a'>页首</a></td> </tr> </table> <img src='' border='0'> </div>");
myload() }
</script>
上面括号中是浮动图层的HTML代码，由于HTML代码是用双引号括起来的，所以原HTML中的双引号必须改成单引号，上面<img src=' ' border='0'>中是空的，你可以加上图片的相对路径，就可以在浮动图层上显示图象了，若不用图片，可把这一句删去。
3、在<body>标记中加上这样一句代码：onLoad="myload()"
这样在浏览器中就可见到象你在这里看到的一样的浮动图层了，在编辑窗中是看不到的。
二、浮动图层制作方法二
1、在网页上插入一个图层，图层名改为：mydiv (不能用其它名称），把图层放在你认为合适的位置，并在图层上写上内容；
2、把下面这段代码复制到网页源代码的<head>与</head>之间：
<style type="text/css" media="screen">
#mydiv {
position: absolute;
width: 90;
visibility: visible;
z-index: 20;
}
-->
</style>
3、把下面这段Javascript程序复制到网页源代码的<body>与</body>之间：
<script LANGUAGE="JavaScript">
self.onError=null;
currentX = currentY = 0;
whichIt = null;
lastScrollX = 0; lastScrollY = 0;
NS = (document.layers) ? 1 : 0;
IE = (document.all) ? 1: 0;
<!-- 这个函数根据不同的浏览器设置初始值-->
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.mydiv.style.pixelTop += percent;
if(NS) document.mydiv.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.mydiv.style.pixelLeft += percent;
if(NS) document.mydiv.left += percent;
lastScrollX = lastScrollX + percent;
}
}
<!-- 初始值设置结束-->
<!-- 计算坐标并移动到新位置-->
function checkFocus(x,y) {
stalkerx = document.mydiv.pageX;
stalkery = document.mydiv.pageY;
stalkerwidth = document.mydiv.clip.width;
stalkerheight = document.mydiv.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("mydiv") == -1) {
whichIt = whichIt.parentElement; if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.mydiv;
StalkerTouchedX = e.pageX-document.mydiv.pageX;
StalkerTouchedY = e.pageY-document.mydiv.pageY;
}
}
return true;
}
<!-- 自动移动或拖动-->
if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
}
if(IE) {
document.onmousedown = grabIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1);
</script>
这种方法改变格式无需编码，但它的程序好象是长了点，实际移动起来的效果也要好一点，但第一种方法移动的速度可以做得很快，它实际上是确定好新坐标后重写。实际上在浮动层上不光可以放文字，也可以放图片或其它什么东东。
