JavaScript 学习笔记（五）广告、.ActiveXObject、scrollTop、.onscroll、clearTimeout()、return;、clientWidth

来源：互联网发布：搭建php mysql 编辑：程序博客网时间：2024/06/06 04:12

广告实例

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">--><!--错误使用--><!--DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以，如果你不注意设置了错误的DOCTYPE，结果可能会令页面出现错误。--><!DOCTYPE>

body{}#adv{/*position:absolute;top:200px;left:100px;*//*不能这边定义，必须使用内嵌样式*/}#aa{height:2000px;width:2000px;}

var initTop;var initLeft;function init() {initTop = parseInt(document.getElementById("adv").style.top);initLeft = parseInt(document.getElementById("adv").style.left);//alert(initTop);}function move() {var st;var sl;if(window.ActiveXObject) {/*保持兼容IE和谷歌等浏览器*/st = parseInt(document.documentElement.scrollTop);sl = parseInt(document.documentElement.scrollLeft);}else {st = parseInt(document.body.scrollTop);sl = parseInt(document.body.scrollLeft);}document.getElementById("adv").style.top = initTop + st;document.getElementById("adv").style.left = initLeft + sl;}function closeDiv() {document.getElementById("adv").style.display="none";}window.onload=init;window.onscroll=move;

<form id="form1" method="post"><div id="container"><div id="adv" style="position:absolute;top:200px;left:100px;"><img src="image/image001.gif" /><a href="javascript:closeDiv()">关闭</a></div><div id="aa"></div></div></form>

END

var w;function show() {var obj = document.getElementById("adv");if(typeof(w)!="undefined") {clearTimeout(w);/*setTimeout()简单的说就是过多少秒以后调用某个函数;clearTimeout() 清除定时器,相对于setTimeout()方法*/}obj.style.left="0px";}function hide() {var obj = document.getElementById("adv");var p = parseInt(obj.style.left) - 5;if(p<-150) {p=-150;window.clearTimeout(w);obj.style.left = p;return;}obj.style.left=p;w = window.setTimeout("hide()", 50);}

<form id="form1" method="post"><div id="container"><div id="adv" onmouseover="show()" onmouseout="hide()" style="position:absolute;left:-150px;top:100px;"><img src="image/image001.gif" /></div></div></form>

END

var obj;var advw;var advh;var px;var py;var fx=1;var fy=1;function init(){   obj = document.getElementById("adv");   advw = obj.style.width;   advh = obj.style.height;   //alert(advw);}function move() {px = parseInt(obj.style.left);py = parseInt(obj.style.top);if(px<=0) {fx = 1;}else if(parseInt(advw)+px >= parseInt(document.body.clientWidth)) {fx = -1;}if(py<=0) {fy = 1;}else if(parseInt(advh)+py >= parseInt(document.documentElement.clientHeight)) {fy = -1;}px = px + (2*fx);py = py + (2*fy);obj.style.left = px + "px";obj.style.top = py +"px";}window.onload=init;window.setInterval("move()",50);

<form id="form1" method="post"><div id="container"><div id="adv" style="position:absolute;top:10px;left:10px;width:100px;height:100px;"><img src="image/image001.gif" /></div></div></form>

END