浮动图层
天下维客，你可以修改的网络知识库
| Photoshop 图层 | 图层样式 | 合并图层 | 盖印图层 | 图层蒙版 |
| 图层蒙版的使用 | 复制图层 | 填充图层 | 浮动图层 |
图层效果和样式的出现，是Photoshop一个划时代的进步。在Photoshop中，用图层效果和图层样式创造特殊图像效果，其方便程度甚至比特效本身更令人惊讶。
目录 |
[编辑]
什么叫浮动图层
我们在网上经常看到有的网页上有一块内容，不管垂直滚动条如何翻动网页，始终在屏幕上的同一位置，我把它称为“浮动层”，因为它看起来象在网页上似的（你看右上角那个黄色的菜单条，就是下面两个例子所做来的效果）。
[编辑]
浮动图层制作方法
制作这种效果要借助于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
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>
这种方法改变格式无需编码，但它的程序好象是长了点，实际移动起来的效果也要好一点，但第一种方法移动的速度可以做得很快，它实际上是确定好新坐标后重写。实际上在浮动层上不光可以放文字，也可以放图片或其它什么东东。
[编辑]
参见
[编辑]
相关内容
| Photoshop 图层 | Photoshop图层初识 | 背景图层 | 移动图层 | 图层的选择 |
| 如何选择多个图层 | 如何改变图层层次 | 图层不透明度 | 图层样式的效果 | 图层链接 |
| 图层对齐 | 合并图层 | 锁定图层 | 使用图层组 | 图层复合 |
| Photoshop的工作环境 | 工具箱 | 菜单命令 | 控制面板 | 滤镜 | 位图 | 矢量图 |
| 分辨率 | 图层 | 栅格 | 选区 | 通道 | 蒙版 | 路径 |
| 像素 | 色彩模式 | 图形文件格式 | 输入 | 输出 | 打印 | 扫描 |
| 链接 | 传输 | Photoshop相关教程 | ImageReady | Photoshop学习方法 | 优化软件 |
