這兩天遇到一個需求就是在一個頁面中浮動一張圖片兼容浏覽器那是默認需求鼠標懸停那也算是默認需求本來認為沒什麼麻煩的網上那麼多隨便搜一個再改吧改吧就哦了可是後來發現沒有想象的那麼簡單
問題一網上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
|| ;
From:http://tw.wingwit.com/Article/program/net/201311/12058.html