这两天遇到一个需求就是在一个页面中浮动一张图片兼容浏览器那是默认需求鼠标悬停那也算是默认需求本来认为没什么麻烦的网上那么多随便搜一个再改吧改吧就哦了可是后来发现没有想象的那么简单
问题一网上DEMO都是在无DTD标准下处理的
问题二不能兼容多个浏览器
这些都无法满足我的需求对此问题搞了将近一天时间最后功夫不负有心人加上网上的一篇文章的建议终于可以说我成功了希望有朋友用得上
好了前序到此上代码
var xPos = ;
var yPos = ;
var step = ;
var delay = ;
var height = ;
var Hoffset = ;
var Woffset = ;
var yon = ;
var xon = ;
var pause = true;
var interval;
var flowimg = documentgetElementById(flowimg);
function changePos() {
Hoffset = flowimgoffsetHeight; Woffset = flowimgoffsetWidth;
width = documentdocumentElementclientWidth || documentbodyclientWidth; height = documentdocumentElementclientHeight || documentbodyclientHeight;
flowimgstyleleft = xPos + (documentbodyscrollLeft || documentdocumentElementscrollLeft) + px; flowimgstyletop = yPos + (documentbodyscrollTop || documentdocumentElementscrollTop) + px;
if (yon)
{ yPos = yPos + step; }
else
{ yPos = yPos step; }
if (yPos < )
{ yon = ; yPos = ; }
if (yPos >= (height Hoffset)) {
yon = ;yPos = (height Hoffset);
}
if (xon)
{ xPos = xPos + step; }
else
{ xPos = xPos step; }
if (xPos < )
{ xon = ; xPos = ; }
if (xPos >= (width Woffset)) {
xon = ; xPos = (width Woffset);
}
}
function start() {
flowimgvisibility = visible; flowimgonmouseover = function() {
pause_resume();
}
flowimgonmouseout = function() {
pause_resume();
}
interval = setInterval(changePos() delay);
}
function pause_resume() {
if (pause) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval(changePos() delay);
pause = true;
}
}
start();
忘记是哪位仁兄/MM 的原型代码了在此功能上完善了鼠标的暂停浏览器的兼容功能
参考
具体详情【以防页面打不开】
做页面的时候可能会用到位置固定的层读取 documentbodyscrollTop 来设置层的位置像这样
windowonscroll = function ()
{
var oFix = documentgetElementById(divfix); oFixstyletop = documentbodyscrollTop + px;
}
可是怎么没有达到预期效果呢输出 documentbodyscrollTop 的值一看一直都是 原来是 DTD 的问题要是页面直接用 开头的话就没有问题了但是要符合 web 标准DTD 当然是不能少的具有 DTD 时用 documentdocumentElementscrollTop 代替 documentbodyscrollTop 就可以了
windowonscroll = function ()
{
var oFix = documentgetElementById(divfix); oFixstyletop = documentdocumentElementscrollTop + px;
}
编者注
页面具有 DTD(或者说指定了 DOCTYPE)时使用 documentdocumentElement
页面不具有 DTD(或者说没有指定了 DOCTYPE)时使用 documentbody
在 IE 和 Firefox 中均是如此
为了兼容可以使用如下代码 var scrollTop = windowpageYOffset || documentdocumentElementscrollTop || documentbodyscrollTop
|| ;