制作浮动的广告图片，你学会了么？-pg电玩城

制作浮动的广告图片

第一步：使用dreamweaver创建一个html文档，为了广告图片演示方便，我们在html文档中插入淘宝网pg电玩城主页页面效果所对应的图片
“contentpic.jpg”。

第二步：使用dreamweaver在html文档中插入一个层，并设置层的相关属性。
另外，还必须切换到代码窗口，手动修改为style="......"。例如，在dw中插入advlayer层，将自动生成如下所示的样式代码。

#advlayer{
   position:absolute;
   left:16px;
   top:129px;
   width:180px;
   height:230px;
   z-index:1;
}

我们必须剪切advlayer{}中的样式代码，然后复制到对应的的style属性中，即将其修改为：

中间的回车符不去掉也可以，注意层的宽度和高度应与第三步中插入的图片大小保持一致，最后去掉内嵌样式剩下的代码。

第三步：选中层，然后在层中插入图片“advpic.gif”。此时层中的图片还是静态的，不能随滚动条同步滚动，为了使层能随滚动条动起来，我们还必须编写javascript脚步。

第四步：编写用于实现图片总位于页面顶端左边位置的javascript代码。

var advinittop=0；
function move（）{
                  document.getelementbyid("advlayer").style.pixeltop=advinittop document.body.scrolltop;
                  }

在第四步的代码片段中，先说明一下为什么用pixeltop属性而不用top属性？其原因是top属性返回带单位的值，如getelementbyid("advlayer").style.top将返回“129px;”。同理，left和pixelleft一样。另外，通过document对象的body的scrolltop和scrolltopleft属性来获取纵向滚动条和横向滚动条所卷去的部分值。此外，使用getelementbyid（）方法获取层对象，如本例document.getelementbyid("advlayer"),便于对层的访问和控制。

第五步：捕获鼠标滚动事件，当页面滚动时就调用move（）函数。

window.onscroll=move;

上述制作过程所对应的完整代码如示例2所示。

示例2

var advinittop=0;//使层总置于顶端的初始值
function move（）{
document.getelementbyid ("advlayler").style.pixeltop=advinittop document.body.scrollltop;
}
window.onscroll=move;//窗口的滚动事件，当页面滚动时调用move()函数