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

最新推荐文章于 2017-07-06 20:50:51 发布

YuiJUNJUN

最新推荐文章于 2017-07-06 20:50:51 发布

阅读量1.2k

点赞数

分类专栏： HTML JavaScript CSS

本文链接：https://blog.csdn.net/u010221685/article/details/8839719

版权

HTML 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

JavaScript

11 篇文章 0 订阅

订阅专栏

CSS

1 篇文章 0 订阅

订阅专栏

广告实例

<!--<!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.οnlοad=init;
window.οnscrοll=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" οnmοuseοver="show()" οnmοuseοut="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.οnlοad=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

YuiJUNJUN

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 学习笔记（五）广告、.ActiveXObject、scrollTop、.onscroll、clearTimeout()、return;、clientWidth

广告实例-->body{}#adv{ /*position:absolute; top:200px;
复制链接

扫一扫