使用JavaScript制作网站广告.ppt

广告综合实例 制作随机移动的窗口-1 制作随机移动的窗口-2 实现思路： 在页面中插入层，在层中插入图片 编写脚本 1、使用getElementById( )方法获得层对象 2、设置层的样式style的属性 document.getElementById(Layer1).style.top=Math.random()*500; document.getElementById(“Layer1”).style.left= Math.random()*500； 制作随机移动的窗口-3 效果图 加深 如何将随机移动的广告加到自己的网站中 制作自由移动的窗口-1 制作随机移动的窗口-2 实现思路： 在页面中插入层，在层中插入图片 编写脚本 1、使用getElementById( )方法获得层对象 2、设置层的样式style的属性 document.getElementById(fly).style.left = x++; document.getElementById(fly).style.top = y++; 制作自由移动的窗口-3 制作自由移动的窗口-3 制作自由移动的窗口-1 制作自由移动的窗口-3 制作自由移动的窗口-3 效果图 加深 如何将自由移动的广告加到自己的网站中 制作浮动的广告图片-1 制作浮动的广告图片-2 实现思路： 在页面中插入层，然后在层中插入图片 编写脚本 1、使用getElementById( )方法获取层对象 2、捕获鼠标滚动事件，改变层对象的位置坐标 制作浮动的广告图片-3 常见的页面坐标的介绍 top:指定元素的上边界位置。 pixelTop:设置或返回元素的上边界。 left:指定元素的左边界位置。 scrolltop:页面滚动的高度 制作浮动的广告图片-3 div style=width:200px;height:200px;background-color:#999999;overflow:auto; id=外层元素 div style=width:100px;height:300px;background-color:#FFFF00; id=内层元素 这些文字显示在内层元素中。 /div /div div style=width:200px;height:200px;background-color:red;overflow:auto; id=外层元素 div style=width:100px;height:300px;background-color:blue; id=内层元素 这些文字显示在内层元素中。 /div /div scrollTop值是：span id=演示元素scrollTop的值/span script type=text/javascript var 外层元素_div = document.getElementById(外层元素); 外层元素_div.onscroll=读取scrollTop的值并显示出来; var span_演示元素scrollTop的值 = document.getElementById(演示元素scrollTop的值); function 读取scrollTop的值并显示出来() {span_演示元素scrollTop的值.innerHTML=外层元素_div.scrollTop; } 读取scrollTop的值并显示出来(); /script 解释 内层元素的高度值300px 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把overflow设置为auto，因此外层元素的右侧会出现一个上下方向的滑动条 初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。 当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超出的部分。 当拖动滚动条到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，超过“外层元素的上边界”的内容的高度=300px-200px=100px，这也就是此时的scrollTop值。 通过js代码来读取，写入scrollTop的值 注意：scrollTop的使用方式是element.scrollTop，而不是element.style.scrollTop 制作浮动的广告图片-4 制作带关闭按钮的浮动窗口-1 制作带关闭按钮的浮动窗口-2 实现思路： 在页面中插入层，在层中插入图片 编写脚本 1、使用getElementById( )方法获得层对象 2、设置层的样式style的显示属性display