关注互联网发展
雨无形
该用户没有分享资料
雨无形
由修改漂浮广告代码而学到的DOCTYPE声明对JS的影响
一 21st
经常有些JS代码明明在别人网页上可以运行,拷贝过来运行却出错,这个时候可以检查下是不是DOCTYPE声明的问题
在没有DOCTYPE声明的情况下:
document.body.clientWidth
document.body.clientHeight
为当前窗口的宽度/高度;
在DOCTYPE声明以后
document.body.clientWidth
document.body.clientHeight
为整个页面的宽度/高度;
document.documentElement.clientWidth
document.documentElement.clientHeight
为当前窗口的宽度/高度;
同样增加DOCTYPE声明后
document.body.scrollLeft
document.body.scrollTop
要改为
document.documentElement.scrollLeft
document.documentElement.scrollTop
我修改的,支持FF和IE的漂浮广告代码
一 21st
网上搜索的一段代码,但是加上DOCTYPE后就不能用了,于是乎修改了一下,现在完美支持FF和IE
JS代码如下:
- var img = document.getElementById("img");
- var xPos = 20;
- var yPos = document.documentElement.clientWidth - img.offsetHeight;
- var step = 1;
- var delay = 5;
- var height = 0;
- var Hoffset = 0;
- var Woffset = 0;
- var yon = 0;
- var xon = 0;
- var pause = true;
- var interval;
- img.style.top = yPos + "px";
- function changePos() {
- width = document.documentElement.clientWidth;
- height = document.documentElement.clientHeight;
- Hoffset = img.offsetHeight;
- Woffset = img.offsetWidth;
- img.style.left = xPos + document.documentElement.scrollLeft + "px";
- img.style.top = yPos + document.documentElement.scrollTop + "px";
- if (yon) {
- yPos = yPos + step;
- } else {
- yPos = yPos - step;
- }
- if (yPos < 0) {
- yon = 1;
- yPos = 0;
- }
- if (yPos >= (height - Hoffset)) {
- yon = 0;
- yPos = (height - Hoffset);
- }
- if (xon) {
- xPos = xPos + step;
- }
- else {
- xPos = xPos - step;
- }
- if (xPos < 0) {
- xon = 1;
- xPos = 0;
- }
- if (xPos >= (width - Woffset)) {
- xon = 0;
- xPos = (width - Woffset);
- }
- }
- function start() {
- img.visibility = "visible";
- interval = setInterval(‘changePos()’, delay);
- }
- start();