function PopUp(id, config){ this.id=id; var c = this.config = config; c.width = $gv(c.width,300); c.height = $gv(c.height,200); c.bottom = $gv(c.bottom,0); c.right = $gv(c.right,20); c.display = $gv(c.display,true); c.contentUrl= $gv(c.contentUrl,""); c.motionFunc= $gv(c.motionFunc,$motion.smooth); c.position = {x:0,y:0}; var t=c.time; t.slideIn = $gv(t.slideIn,10); t.hold = $gv(t.hold,10); t.slideOut = $gv(t.slideOut,10); t.slideIn *= 1000; t.hold *= 1000; t.slideOut *= 1000; this.container = document.body; this.popup = null; this.content = null; this.switchButton = null; this.moveTargetPosition = 0; this.startMoveTime = null; this.startPosition = null; this.status = PopUp.STOP; this.intervalHandle = null; this.mm = "max"; this.imgMin = ""; this.imgMax = ""; } //static members PopUp.STOP = 0; PopUp.MOVE_DOWN = 1; PopUp.MOVE_UP = 2; PopUp.SWITCH_TO_MIN = PopUp.MOVE_DOWN | 4; PopUp.SWITCH_TO_MAX = PopUp.MOVE_UP | 8; var __o={ create : function (){ var doc=document; var c=this.config; //create popup holder & config it. var p = this.popup = doc.createElement("div"); this.container.appendChild(p); p.id=this.id; p.style.cssText="position:absolute; z-index:9000; overflow:hidden; border:0px solid #f00; "; $dom.setSize(p, c.width, c.height); //create popup content holder & config it. var t = this.content = doc.createElement("div"); p.appendChild(t); t.id = this.id+"_content"; t.style.cssText="position:absolute; z-index:1; overflow:hidden;"; $dom.setSize(t, c.width, c.height); $dom.setPosition(t,0,0);//add c.position.y = c.height;//add this.onresize();//add //$dom.setPosition(t, 0, c.height);//hide it at first // create content holder's content. // a close button & an iframe for loading external content. t.innerHTML = "<a id='closeButton' href='#'></a>"+ "<a id='switchButton' href='#'></a>"+ "<iframe id='"+this.id+"_content_iframe' src="+c.contentUrl+" frameborder=0 scrolling=no width='100%' height='100%' style='height:100%'></iframe>"; var sBtn = this.switchButton = $_t(t,'a',"switchButton"); sBtn.style.cssText='position:absolute; z-index:2; font-size:0px; line-height:0px; left:255px; top:21px; width:15px; height:15px; background-image:url("http://www.sgnet.cc/tupian/small/small.gif");'; $addEL(sBtn,"click",$dele(this,"switchMode"),true); $addEL(sBtn,"click",$cancelEvent,true); var btn = $_t(t,'a',"closeButton"); btn.style.cssText='position:absolute; z-index:2; font-size:0px; line-height:0px; left:275px; top:21px; width:15px; height:15px; background-image:url("http://www.sgnet.cc/tupian/small/close.gif");'; $addEL(btn,"mouseover",function (e){ $dom.setAlpha(this,0.4); },true); $addEL(btn,"mouseout",function (e){ $dom.setAlpha(this,1); },true); $addEL(btn,"click",$dele(this,"hide"),true); $addEL(btn,"click",$cancelEvent,true); var container=$IE ? document.body : document.documentElement; $addEL(document.body,"resize",$dele(this,"onresize"),true); this.__hackTimer=window.setInterval("__popup.onresize()",50); $addEL(container,"scroll",$dele(this,"onresize"),true); //initialize position at once. this.onresize(); }, show : function (){ if (!this.config.display) return; this.moveTargetPosition = 0; this.status = PopUp.MOVE_UP; this.startMove(); }, hide : function (){ this.moveTargetPosition = this.config.height; this.status = PopUp.MOVE_DOWN; this.startMove(); }, minimize : function (){ //alert("minimize"); this.mm = "min"; this.moveTargetPosition = this.config.height - 38; this.status = PopUp.SWITCH_TO_MIN; this.startMove(); var s = this.switchButton.style; var bg = s.backgroundImage; if (bg.indexOf(this.imgMin) > -1) { bg = bg.replace(this.imgMin,this.imgMax); s.backgroundImage = bg; } }, maximize : function (){ //alert("maximize"); if (!this.config.display) return; this.mm = "max"; this.moveTargetPosition = 0; this.status = PopUp.SWITCH_TO_MAX; this.startMove(); var s = this.switchButton.style; var bg = s.backgroundImage; if (bg.indexOf(this.imgMax) > -1) { bg = bg.replace(this.imgMax,this.imgMin); s.backgroundImage = bg; } }, delayHide : function (){ window.setTimeout("__popup.hide()",this.config.time.hold); }, delayMin : function (){ window.setTimeout("__popup.minimize()",this.config.time.hold); }, switchMode : function (){ //alert("switch"); if (this.mm == "min"){ this.maximize(); } else { this.minimize(); } }, startMove : function (){ this.stopMove(); this.intervalHandle = window.setInterval("__popup.move()",100); this.startMoveTime = new Date().getTime(); //this.startPosition = $dom.getPosition(this.content).y;//parseInt(this.content.style.top); this.startPosition = this.config.position.y; }, stopMove : function (){ if (this.intervalHandle != null) window.clearInterval(this.intervalHandle); this.intervalHandle = null; }, move : function (){ var t = new Date().getTime(); t = t - this.startMoveTime; var total = this.status & PopUp.MOVE_UP ? this.config.time.slideIn : this.config.time.slideOut; var y = this.config.motionFunc(this.startPosition, this.moveTargetPosition, t/total); //this.content.style.top = y + "px"; this.config.position.y = y; this.onresize(); if (t >= total){ this.onFinishMove(); } }, onFinishMove : function (){ this.stopMove(); //this.content.style.top = this.moveTargetPosition + "px"; if (this.status == PopUp.MOVE_UP && this.config.time.hold > 0 ){ this.delayMin(); } else { if (this.__hackTimer!=null) window.clearInterval(this.__hackTimer); } this.status = PopUp.STOP; }, onresize : function (){ var c=this.config; //var t=document.documentElement; var t=document.body; var dx=t.clientWidth + t.scrollLeft; var dy=t.clientHeight + t.scrollTop; var x = dx - c.right - c.width ; var y = dy - c.bottom - c.height + c.position.y; $dom.setPosition(this.popup, x, y); $dom.setSize(this.popup, c.width, c.height-c.position.y); } } $cpAttr(PopUp.prototype,__o); /*---------------------------------------*/ function readCookie(name) { var cookieValue = ""; var search = name + "="; if(document.cookie.length > 0) { offset = document.cookie.indexOf(search); if (offset != -1) { offset += search.length; end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; cookieValue = unescape(document.cookie.substring(offset, end)) } } return cookieValue; } function writeCookie(name, value, hours) { var expire = ""; if(hours != null) { expire = new Date((new Date()).getTime() + hours * 3600000); expire = "; expires=" + expire.toGMTString(); } document.cookie = name + "=" + escape(value) + expire + ";path=/"; } /* * main function to config the pop-up window & run it. * web deployer change codes here to manipulte popups performance. * & should not change codes out of this function. */ function job(){ /* * config object */ var cfg={ //width & height of the popup window ,these values should be determined debpended on inner contents. width : 300, height : 200, //distance to the bottom & the right edge. bottom : 0, right : 0, //switch of displaying the popup display : true, //content url contentUrl : "http://www.sgnet.cc/news/node_23.htm", //time configuration,in seconds time : { slideIn : 1, hold : 60, slideOut : 1 } } //at what time the popup should display,in hours : 0~23, //the number after add symbol means after how many the hours to display popup for the next time. var displayTimeList = ["7+7"]; // the popup displays each time thie page reload or only once at the first time page loaded. // once / eachTime //var displayMode = "once"; var displayMode = "eachTime"; //cookie name storing the next time to display popup var cookieName="sina_blog_popup_next_display_time"; /* * --------------------- from here below, the codes should NOT be modified. */ var hours={}; var delays=[]; for (var i=0;i<displayTimeList.length;i++) { var o = displayTimeList[i]; var ar = o.split("+"); var t = parseInt(ar[0]); for (var m=0;m<ar.length-1;m++){ ar[m]=ar[m+1]; } hours[t]=true; for (var j=0;j<ar.length;j++){ hours[t + parseInt(ar[j])]=true; } } displayTimeList=[]; for (var i in hours){ var s = parseInt(i); if (isNaN(s)) continue; displayTimeList[displayTimeList.length]=s; } displayTimeList = displayTimeList.sort(); //alert(displayTimeList); var pp = new PopUp("xp", cfg); window.__popup=pp; pp.create(); //display:
var n=readCookie(cookieName); if (displayMode=="eachTime") pp.show(); else { var tm=new Date().getTime(); if (n==null || tm>n) { pp.show(); //get next display time var hr=new Date().getHours(); var f = 60*60*1000; var l = displayTimeList.concat(), len = l.length; for (var i = 0; i < len; i++) l[len + i] = l[i] + 24; for (var i = 0; i < l.length && hr >= l[i]; i++); var dt = new Date(); dt.setHours(l[i] > 23 ? l[i] - 24 : l[i]); var nextTime = dt.getTime(); if (l[i] > 23) nextTime += f * 24 ; writeCookie(cookieName, nextTime, 24); } } } function doit(){ if(document.readyState == 'loaded' || document.readyState == 'complete'){ job(); }else{ window.setTimeout(doit,500); return; } } doit(); </script> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </body> </html>
代码太长,俺直接挂到网上了, 正常的 http://www.sgnet.cc/tupian/small/4.0.htm doctype声明为: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 不正常的 http://www.sgnet.cc/tupian/small/4.01.htm doctype声明为:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
this.id=id;
var c = this.config = config;
c.width = $gv(c.width,300);
c.height = $gv(c.height,200);
c.bottom = $gv(c.bottom,0);
c.right = $gv(c.right,20);
c.display = $gv(c.display,true);
c.contentUrl= $gv(c.contentUrl,"");
c.motionFunc= $gv(c.motionFunc,$motion.smooth);
c.position = {x:0,y:0};
var t=c.time;
t.slideIn = $gv(t.slideIn,10);
t.hold = $gv(t.hold,10);
t.slideOut = $gv(t.slideOut,10);
t.slideIn *= 1000;
t.hold *= 1000;
t.slideOut *= 1000;
this.container = document.body;
this.popup = null;
this.content = null;
this.switchButton = null;
this.moveTargetPosition = 0;
this.startMoveTime = null;
this.startPosition = null;
this.status = PopUp.STOP;
this.intervalHandle = null;
this.mm = "max";
this.imgMin = "";
this.imgMax = "";
}
//static members
PopUp.STOP = 0;
PopUp.MOVE_DOWN = 1;
PopUp.MOVE_UP = 2;
PopUp.SWITCH_TO_MIN = PopUp.MOVE_DOWN | 4;
PopUp.SWITCH_TO_MAX = PopUp.MOVE_UP | 8;
var __o={
create : function (){
var doc=document;
var c=this.config;
//create popup holder & config it.
var p = this.popup = doc.createElement("div");
this.container.appendChild(p);
p.id=this.id;
p.style.cssText="position:absolute; z-index:9000; overflow:hidden; border:0px solid #f00; ";
$dom.setSize(p, c.width, c.height);
//create popup content holder & config it.
var t = this.content = doc.createElement("div");
p.appendChild(t);
t.id = this.id+"_content";
t.style.cssText="position:absolute; z-index:1; overflow:hidden;";
$dom.setSize(t, c.width, c.height);
$dom.setPosition(t,0,0);//add
c.position.y = c.height;//add
this.onresize();//add
//$dom.setPosition(t, 0, c.height);//hide it at first
// create content holder's content.
// a close button & an iframe for loading external content.
t.innerHTML = "<a id='closeButton' href='#'></a>"+
"<a id='switchButton' href='#'></a>"+
"<iframe id='"+this.id+"_content_iframe' src="+c.contentUrl+" frameborder=0 scrolling=no width='100%' height='100%' style='height:100%'></iframe>";
var sBtn = this.switchButton = $_t(t,'a',"switchButton");
sBtn.style.cssText='position:absolute; z-index:2; font-size:0px; line-height:0px; left:255px; top:21px; width:15px; height:15px; background-image:url("http://www.sgnet.cc/tupian/small/small.gif");';
$addEL(sBtn,"click",$dele(this,"switchMode"),true);
$addEL(sBtn,"click",$cancelEvent,true);
var btn = $_t(t,'a',"closeButton");
btn.style.cssText='position:absolute; z-index:2; font-size:0px; line-height:0px; left:275px; top:21px; width:15px; height:15px; background-image:url("http://www.sgnet.cc/tupian/small/close.gif");';
$addEL(btn,"mouseover",function (e){
$dom.setAlpha(this,0.4);
},true);
$addEL(btn,"mouseout",function (e){
$dom.setAlpha(this,1);
},true);
$addEL(btn,"click",$dele(this,"hide"),true);
$addEL(btn,"click",$cancelEvent,true);
var container=$IE ? document.body : document.documentElement;
$addEL(document.body,"resize",$dele(this,"onresize"),true);
this.__hackTimer=window.setInterval("__popup.onresize()",50);
$addEL(container,"scroll",$dele(this,"onresize"),true);
//initialize position at once.
this.onresize();
},
show : function (){
if (!this.config.display) return;
this.moveTargetPosition = 0;
this.status = PopUp.MOVE_UP;
this.startMove();
},
hide : function (){
this.moveTargetPosition = this.config.height;
this.status = PopUp.MOVE_DOWN;
this.startMove();
},
minimize : function (){
//alert("minimize");
this.mm = "min";
this.moveTargetPosition = this.config.height - 38;
this.status = PopUp.SWITCH_TO_MIN;
this.startMove();
var s = this.switchButton.style;
var bg = s.backgroundImage;
if (bg.indexOf(this.imgMin) > -1) {
bg = bg.replace(this.imgMin,this.imgMax);
s.backgroundImage = bg;
}
},
maximize : function (){
//alert("maximize");
if (!this.config.display) return;
this.mm = "max";
this.moveTargetPosition = 0;
this.status = PopUp.SWITCH_TO_MAX;
this.startMove();
var s = this.switchButton.style;
var bg = s.backgroundImage;
if (bg.indexOf(this.imgMax) > -1) {
bg = bg.replace(this.imgMax,this.imgMin);
s.backgroundImage = bg;
}
},
delayHide : function (){
window.setTimeout("__popup.hide()",this.config.time.hold);
},
delayMin : function (){
window.setTimeout("__popup.minimize()",this.config.time.hold);
},
switchMode : function (){
//alert("switch");
if (this.mm == "min"){
this.maximize();
} else {
this.minimize();
}
},
startMove : function (){
this.stopMove();
this.intervalHandle = window.setInterval("__popup.move()",100);
this.startMoveTime = new Date().getTime();
//this.startPosition = $dom.getPosition(this.content).y;//parseInt(this.content.style.top);
this.startPosition = this.config.position.y;
},
stopMove : function (){
if (this.intervalHandle != null) window.clearInterval(this.intervalHandle);
this.intervalHandle = null;
},
move : function (){
var t = new Date().getTime();
t = t - this.startMoveTime;
var total = this.status & PopUp.MOVE_UP ?
this.config.time.slideIn :
this.config.time.slideOut;
var y = this.config.motionFunc(this.startPosition, this.moveTargetPosition, t/total);
//this.content.style.top = y + "px";
this.config.position.y = y;
this.onresize();
if (t >= total){
this.onFinishMove();
}
},
onFinishMove : function (){
this.stopMove();
//this.content.style.top = this.moveTargetPosition + "px";
if (this.status == PopUp.MOVE_UP && this.config.time.hold > 0 ){
this.delayMin();
} else {
if (this.__hackTimer!=null) window.clearInterval(this.__hackTimer);
}
this.status = PopUp.STOP;
},
onresize : function (){
var c=this.config;
//var t=document.documentElement;
var t=document.body;
var dx=t.clientWidth + t.scrollLeft;
var dy=t.clientHeight + t.scrollTop;
var x = dx - c.right - c.width ;
var y = dy - c.bottom - c.height + c.position.y;
$dom.setPosition(this.popup, x, y);
$dom.setSize(this.popup, c.width, c.height-c.position.y);
}
}
$cpAttr(PopUp.prototype,__o);
/*---------------------------------------*/
function readCookie(name)
{
var cookieValue = "";
var search = name + "=";
if(document.cookie.length > 0)
{
offset = document.cookie.indexOf(search);
if (offset != -1)
{
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
cookieValue = unescape(document.cookie.substring(offset, end))
}
}
return cookieValue;
}
function writeCookie(name, value, hours)
{
var expire = "";
if(hours != null)
{
expire = new Date((new Date()).getTime() + hours * 3600000);
expire = "; expires=" + expire.toGMTString();
}
document.cookie = name + "=" + escape(value) + expire + ";path=/";
}
/*
* main function to config the pop-up window & run it.
* web deployer change codes here to manipulte popups performance.
* & should not change codes out of this function.
*/
function job(){
/*
* config object
*/
var cfg={
//width & height of the popup window ,these values should be determined debpended on inner contents.
width : 300,
height : 200,
//distance to the bottom & the right edge.
bottom : 0,
right : 0,
//switch of displaying the popup
display : true,
//content url
contentUrl : "http://www.sgnet.cc/news/node_23.htm",
//time configuration,in seconds
time : {
slideIn : 1,
hold : 60,
slideOut : 1
}
}
//at what time the popup should display,in hours : 0~23,
//the number after add symbol means after how many the hours to display popup for the next time.
var displayTimeList = ["7+7"];
// the popup displays each time thie page reload or only once at the first time page loaded.
// once / eachTime
//var displayMode = "once";
var displayMode = "eachTime";
//cookie name storing the next time to display popup
var cookieName="sina_blog_popup_next_display_time";
/*
* --------------------- from here below, the codes should NOT be modified.
*/
var hours={};
var delays=[];
for (var i=0;i<displayTimeList.length;i++) {
var o = displayTimeList[i];
var ar = o.split("+");
var t = parseInt(ar[0]);
for (var m=0;m<ar.length-1;m++){
ar[m]=ar[m+1];
}
hours[t]=true;
for (var j=0;j<ar.length;j++){
hours[t + parseInt(ar[j])]=true;
}
}
displayTimeList=[];
for (var i in hours){
var s = parseInt(i);
if (isNaN(s)) continue;
displayTimeList[displayTimeList.length]=s;
}
displayTimeList = displayTimeList.sort();
//alert(displayTimeList);
var pp = new PopUp("xp", cfg);
window.__popup=pp;
pp.create();
//display:
var n=readCookie(cookieName);
if (displayMode=="eachTime")
pp.show();
else {
var tm=new Date().getTime();
if (n==null || tm>n) {
pp.show();
//get next display time
var hr=new Date().getHours();
var f = 60*60*1000;
var l = displayTimeList.concat(), len = l.length;
for (var i = 0; i < len; i++) l[len + i] = l[i] + 24;
for (var i = 0; i < l.length && hr >= l[i]; i++);
var dt = new Date();
dt.setHours(l[i] > 23 ? l[i] - 24 : l[i]);
var nextTime = dt.getTime();
if (l[i] > 23) nextTime += f * 24 ;
writeCookie(cookieName, nextTime, 24);
}
}
}
function doit(){
if(document.readyState == 'loaded' || document.readyState == 'complete'){
job();
}else{
window.setTimeout(doit,500);
return;
}
}
doit();
</script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
代码太长,俺直接挂到网上了,
正常的 http://www.sgnet.cc/tupian/small/4.0.htm
doctype声明为: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
不正常的 http://www.sgnet.cc/tupian/small/4.01.htm
doctype声明为:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
例如:
弹窗.style.left=300+'px';
弹窗.style.top=300+'px';
setPosition : function (elmt,x,y,withMargin){
//tf("$dom::setPosition");
if (withMargin){
//var m=this.getMargin(elmt);
//x-=m.l;
//y-=m.t;
}
elmt.style.left=x+"px";
elmt.style.top=y+"px";
},--------------------
你在firebug下跟踪一下上面的x,y的变化吧
//var t=document.documentElement;
var t=document.body;
代码换成下面的就可以了var t=document.compatMode=="CSS1Compat" ? document.documentElement : document.body;ps:这个代码也太复杂了吧,可以看看我以前写的这个http://blog.csdn.net/sohighthesky/archive/2009/11/10/4795886.aspx布局那里页面可以自己改