新浪博客页面右下角小跳窗效果

2009-12-22 窗口页面 ℃

if ($Opera) {
   $IE = true;
   $Gecko = false;
   $Safari = false;
}
if ($IE5) {
         $IE = true;

$Gecko = false;
         $Safari = false;
}
}
function $_t(root,tag,id){
var ar=root.getElementsByTagName(tag);
for (var i=0;i<ar.length;i++){
   if (ar[i].id==id) return ar[i];
}
return null;
}
function _(root){

var ids=arguments;
var i0=0;

if (typeof(root) == 'string') root = document;
else i0=1;

for (var i=i0;i<ids.length;i++){
   var s=root.getElementsByTagName("*");

var has=false;
   for (var j=0;j<s.length;j++){
    if (s[j].id==ids[i]){
     root=s[j];
     has=true;
     break;
    }
   }
   if (!has) return null;
}
return root;
}
//util

function $dele(o,fn,rv){

r.thiz=o;
r.fn=fn;
r.rv=rv;

return r;
}

function $ge(e){
if (e!=null) return e;
if ($IE) {
   return window.event;
} else return e;
}

/**
* get event for a element;
*/
function $gte(e,ev){
if (!e.getElementById) e=e.ownerDocument;
if ($IE) {
   return ev!=null ? ev : e.parentWindow.event;
} else {
   return ev;
   throw new Error("this method can only execute in IE");
}
}
function $addEL(n,e,l,b){

if ($IE){
   if (n["$__listener_"+e]==null){
    var lst=function (e){
    
     var f=arguments.callee;
     var ar=f.fList;
    
     e=$ge(e);
     for (var i=0;i<ar.length;i++){     
      ar[i](e);
     }
    }
    lst.fList=[];   
    n["$__listener_"+e]=lst;
    n["on"+e]=n["$__listener_"+e];

}
   var fList=n["$__listener_"+e].fList;
   fList[fList.length]=l;
  
} else {
   n.addEventListener(e,l,b);
}
}
function $cancelEvent (e) {
if ($IE) {
   e.returnValue = false;
   e.cancelBubble = true;
} else
   e.preventDefault();
};
function $cpAttr(o,p){
for (var i in p){
   var s=p[i];
   o[i]=s;
}
return o;
}
function $getValue(v,d){
return v==null ? d : v;
}
var $gv=$getValue;

var $dom={
parseInt : function(s) {
   if (s == null || s == '' || typeof(s)=='undefined')
    return 0;

return parseInt(s);
},
getClientSize : function(n){
   if ($IE){
    //ts("this is ie");
    var s= {x:n.clientLeft,y:n.clientTop};
    s.l=s.x;
    s.t=s.y;
    s.r=n.clientRight;
    s.b=n.clientBottom;
   
    s.w=n.clientWidth;
    s.h=n.clientHeight;
   
    //tr("calculated client size");
   
    return s;
   } else {
    var t=n.style;
    if (t.borderLeftWidth.length==0 || t.borderTopWidth.length==0 || t.borderRightWidth.length==0 || t.borderBottomWidth.length==0){
    
     var l=n.offsetWidth;
     t.borderLeftWidth="0px";
     l-=n.offsetWidth;

getSize : function (n,withMargin){
   var c={
    x : n.offsetWidth != null ? n.offsetWidth : 0,
    y : n.offsetHeight != null ? n.offsetHeight : 0
   };
  
   //c.x=this.parseInt(c.x);
   //c.y=this.parseInt(c.y);

//tr("get size for : "+n.id);
   //tra(c);
   if (withMargin) {
    var m=this.getMargin(n);
    c.x+=m.l+m.r;
    c.y+=m.t+m.b;
   }
   //tra(m);
   //tr("get size for : "+n.id);
   //tra(c);
   return c; 
},

setSize : function(elmt,x,y,withMargin){
   //tf("$dom::setSize");
   //if (elmt==undefined || elmt.style.display=="none") return;
   if ($IE){
    if (withMargin){    
     var m=this.getMargin(elmt);
     x-=m.l+m.r;
     y-=m.t+m.b;    
    }   
    elmt.style.width=x;   
    elmt.style.height=y;    
   } else {
    var clientSize=this.getClientSize(elmt);
    var dx=clientSize.l+clientSize.r;
   
    var dy=clientSize.t+clientSize.b;
   
    elmt.style.width=x-dx+"px";
    elmt.style.height=y-dy+"px";
   }
},

/**
* get the context position relative to its parent.
*/
getPosition : function (elmt,withMargin){
   var c;
  
   c={
    x:elmt.offsetLeft,
    y:elmt.offsetTop
   };
   //c.x=this.parseInt(c.x);
   //c.y=this.parseInt(c.y);
   if (withMargin){
    var m=this.getMargin(elmt);
    c.x-=m.l;
    c.y-=m.t;
   }
  
   return c;
},
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";
},

setAlpha : function (n,a){
   return;
   n.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity="+a*100+");";
   n.style.opacity = a;
   n.style.MozOpacity = a;
}

}
var $motion={
smooth : function (s, e, t){
   if (t>1) t=1;
   return (e - s) * t + s;
}
}

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 = "http://www.sinaimg.cn/blog/html/2007-06-28/U814P346T1D1076F6DT20070725145920.gif";
this.imgMax = "http://www.sinaimg.cn/blog/html/2007-06-28/U814P346T1D1076F352DT20070725145920.gif";
}

//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:220px;\
        top:6px;\
        width:15px;\
        height:15px;\
        \
        background-image:url("http://www.sinaimg.cn/blog/html/2007-06-28/U814P346T1D1076F6DT20070725145920.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:240px;\
        top:6px;\
        width:15px;\
        height:15px;\
        \
        background-image:url("http://www.sinaimg.cn/blog/html/2007-06-28/U814P346T1D1076F354DT20070725152720.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 - 28;
   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 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     : 260,
   height     : 190,
  
   //distance to the bottom & the right edge.
   bottom    : 2,
   right    : 19,
  
   //switch of displaying the popup
   display    : true,
   
   //content url
   contentUrl   : "http://blog.sina.com.cn/lm/mini/01.html",
  
   //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>

相关特效代码

热门特效代码: 弹出式窗口代码生成器; 自动刷新网页代码; 在状态栏中显示停留时间; 根据不同的分辨率自动采用预设的; 点击弹出窗口层背景变暗; 每个IP每天只弹一次的窗口; 打开浏览器窗口最大化效果; N秒后不询问自动关闭窗口; 自由控制打开的窗口; 框架加载时的loading效果，兼容F

推荐特效代码: 每个IP每天只弹一次的窗口; 打开浏览器窗口最大化效果; N秒后不询问自动关闭窗口; 点击打印网页代码; 变色的表格框; 漂亮的CSS园角效果