制作浮动的广告图片，你学会了么？-沈阳易势科技有限公司

build网站制作

制作浮动的广告图片，你学会了么？当前位置：首页>主要服务>网站制作>JS/Jquery

制作浮动的广告图片

在打开网站时，经常会显示各种随滚动条同步滚动的广告图片，这些动态的广告图片，不仅能起到美化网页的作用，而且还可以在网站中对其他的一些信息进行宣传，从而提高网站的知名度和实现盈利。
实现过程如下：

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

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

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

我们必须剪切advLayer{}中的样式代码，然后复制到对应的<DIV id="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

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html;charset=gb2312">
<TITLE>浮动广告图片</TITLE>
<SCRIPT language="javascript">
var advInitTop=0;//使层总置于顶端的初始值
function move（）{
document.getElementById ("advLayler").style.pixelTop=advInitTop+document.body.scrolllTop;
}
window.onscroll=move;//窗口的滚动事件，当页面滚动时调用move()函数
</SCRIPT>
</HEAD>
<BODT>
<div id="advLayer" style="position:absolute; left:16px; top:129px; width:180px; height:230px; z-index:1;">
<img src="inages/advpic.gif" width="180" height="230">
</div>
<p>
 
</p>
<img src="images/contentpic.jpg" width="993" height="1799">
</p>
</BODY>
</HTML>