《使用JavaScript制作网站广告课件》由会员分享，可在线阅读，更多相关《使用JavaScript制作网站广告课件（47页珍藏版）》请在金锄头文库上搜索。
1、广告综合实例,在网站中常见的广告方式有那几种?,一、随即浮动 二、自由移动 三、随页面的移动而移动 四、随页面的移动而移动（广告变换） 五、对联式 六、伸缩的广告,制作随机移动的窗口-1,如何实现窗口的随机移动？,将窗口放到层上，随机层的top 和left的值,制作随机移动的窗口-2,实现思路： 在页面中插入层，在层中插入图片 编写脚本 1、使用getElementById( )方法获得层对象 2、设置层的样式style的属性 document.getElementById(Layer1).style.top=Math.random()*500; document.getElementById
2、(“Layer1”).style.left= Math.random()*500；,制作随机移动的窗口-3, function move() document.getElementById(Layer1).style.left= Math.random()*500; document.getElementById(Layer1).style.top= Math.random()*500; setTimeout(move(),800); ,设置层的top,left值，决定层在屏幕上的位置,定义随机浮动的层，一定要加上position:absolute，,效果图,加深,如何将随机移动的广告加到自己
3、的网站中,制作自由移动的窗口-1,如何实现窗口的自由移动？,将窗口放到层上，改变层的top 和left的值,制作随机移动的窗口-2,实现思路： 在页面中插入层，在层中插入图片 编写脚本 1、使用getElementById( )方法获得层对象 2、设置层的样式style的属性 document.getElementById(fly).style.left = x+; document.getElementById(fly).style.top = y+;,制作自由移动的窗口-3, #box position:absolute; top:0px; left:0px; width:1000px;
4、height:760px; z-index:1 ,自由移动的层的样式，,制作自由移动的窗口-3, var x = 50,y = 60; /浮动广告初始位置 function floatAD() document.getElementById(fly).style.left = x; /层移动后的左边界 document.getElementById(fly).style.top = y; /曾移动后上边界 x=x+1 y=y+1 setTimeout(floatAD(),10) ,让层的top left都变大，所以层向下移动，,制作自由移动的窗口-1,上面的代码实现的效果，移动一段时间后到了边
5、界，就不见这个该如何处理,判断当 left 和top的值大于等于一个数时，让其重新开始,制作自由移动的窗口-3, var x = 50,y = 60; /浮动广告初始位置 function floatAD() var R= document.body.offsetWidth-document.getElementById(fly).offsetWidth; /层移动的右边界 var B = document.body.offsetHeight-document.getElementById(fly).offsetHeight; /层移动的下边界 document.getElementById(
6、fly).style.left = x; /层移动后的左边界 document.getElementById(fly).style.top = y; /曾移动后上边界 x=x+1 y=y+1 setTimeout(floatAD(),10) ,制作自由移动的窗口-3, x = x + step*(xin?1:-1);/判断水平方向 if (x R) xin = false; x = R; y = y + step*(yin?1:-1); if (y B) yin = false; y = B; setTimeout(floatAD(), delay)/隔多长时间调用一次 ,效果图,加深,如何将
7、自由移动的广告加到自己的网站中,制作浮动的广告图片-1,如何在页面上方显示广告图片？如何控制图片的移动？,使用DIV层，把图片放在层中，然后使用JavaScript控制层的位置坐标,制作浮动的广告图片-2,实现思路： 在页面中插入层，然后在层中插入图片 编写脚本 1、使用getElementById( )方法获取层对象 2、捕获鼠标滚动事件，改变层对象的位置坐标,制作浮动的广告图片-3,常见的页面坐标的介绍 top:指定元素的上边界位置。 pixelTop:设置或返回元素的上边界。 left:指定元素的左边界位置。 scrolltop:页面滚动的高度,制作浮动的广告图片-3, 这些文字显示在内
8、层元素中。 ,外层元素的高度值是200px,内层元素的高度值是300px。很明显，“内层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外，scrollTop就等于这部分“不可见的内容”的高度。, 这些文字显示在内层元素中。 scrollTop值是： var 外层元素_div = document.getElementById(外层元素); 外层元素_div.onscroll=读取scrollTop的值并显示出来; var span_演示元素scrollTop的值 = document.getElementById(演示元素scrollTop的
9、值); function 读取scrollTop的值并显示出来() span_演示元素scrollTop的值.innerHTML=外层元素_div.scrollTop; 读取scrollTop的值并显示出来(); ,解释,内层元素的高度值300px 外层元素的高度值200px,因此“外层元素的内容”(也就是“内层元素”)无法完全显示，而外层元素把overflow设置为auto，因此外层元素的右侧会出现一个上下方向的滑动条 初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。 当向下拖动滚动条时，超过“外层元素的上
10、边界”的内容会逐渐增多，scrollTop值就等于这些超出的部分。 当拖动滚动条到最底部时，“内层元素的下边界”和“外层元素的下边界”重合，超过“外层元素的上边界”的内容的高度=300px-200px=100px，这也就是此时的scrollTop值。,通过js代码来读取，写入scrollTop的值 注意：scrollTop的使用方式是element.scrollTop，而不是element.style.scrollTop,制作浮动的广告图片-4, var advInitTop=0; function move( ) document.getElementById(advLayer).style
11、.pixelTop= advInitTop+document.body.scrollTop; window.onscroll=move ; /当页面滚动时调用move( )函数 ,设置层的与上边界与屏幕的上边界的距离,通过页面滚动的高度来改变层距离上边界的距离,制作带关闭按钮的浮动窗口-1,如何实现带关闭功能的浮动窗口？,把带关闭的图标放到层中，当点击图标时层消失。,制作带关闭按钮的浮动窗口-2,实现思路： 在页面中插入层，在层中插入图片 编写脚本 1、使用getElementById( )方法获得层对象 2、设置层的样式style的显示属性display=none,制作带关闭按钮的浮动窗口-
12、3, var advInitTop=0; function inix( ) advInitTop=document.getElementById(advLayer).style.pixelTop; function move( ) document.getElementById(advLayer).style.pixelTop= advInitTop+document.body.scrollTop; function closeMe( ) document.getElementById(closeLayer).style.display=none; document.getElementByI
13、d(advLayer).style.display=none; window.onscroll=move ; /当页面滚动时调用move( )函数 ,隐藏关闭图标所在的层和浮动窗口所在的层,关闭图标所在的层的样式,制作带关闭按钮的浮动窗口-4,上一张PPT中示例能实现关闭了，但关闭图片不能跟随滚动，怎么办？,让关闭图标所在的层像浮动窗口一样，也跟随滚动条同步滚动。,解决办法：在move( )方法中添加图标所在的层与页面滚动的高度保持同步的代码即可,制作带关闭按钮的浮动窗口-5, var advInitTop=0; var closeInitTop=0; function inix( ) adv
14、InitTop=document.getElementById(advLayer).style.pixelTop;closeInitTop=document.getElementById(closeLayer).style.pixelTop; function move( ) document.getElementById(advLayer).style.pixelTop= advInitTop+document.body.scrollTop ; document.getElementById(closeLayer).style.pixelTop= closeInitTop+document.
15、body.scrollTop ; function closeMe( ) document.getElementById(closeLayer).style.display=none; document.getElementById(advLayer).style.display=none; window.onscroll=move ; /窗口的滚动事件 ,关闭图片所在的层和滚动条同步滚动,加深,如何将浮动的广告加到自己的网站中 示例：,制作图片互换的广告-1,如何将上浮动广告的例子进行改进，使层中的图片可以改变,给层中的图片命名，换图片的src,制作图片互换的广告-2,实现思路： 联想前面图
16、片幻灯片的例子，给层中的图片命名，换图片的src 编写脚本 1、 使用getElementById( )方法获得图片对象 2、设置图片的src属性 document.getElementById(tp2).src=images/pic+i+.jpg;,制作图片互换的广告-3,在javascript中加入如下代码 function showimg() var i=Math.floor(Math.random()*5+1) document.getElementById(tp2).src=images/pic+i+.jpg; setInterval(showimg(),3000),因为图片的名称是pic1到pic5，所以随机1到5的数，如果图片名称没规律，如何做？,每隔3秒变一张图片,制作图片互换的广告-4, ,Body中只添加图片的id属性的值,加深,如何将图片互换的广告放到你的网站中 注意所有互换的图片的颜色与网站的协调。 示例：,制作对联式广告-1,如何将
