• 注册
热门标签
↑ 收起导航

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

不多说,自己看效果

<script>

{

var ua = navigator.userAgent;

var $IE = (navigator.appName == "Microsoft Internet Explorer");

var $IE5 = $IE && (ua.indexOf('MSIE 5') != -1);

var $IE5_0 = $IE && (ua.indexOf('MSIE 5.0') != -1);

var $Gecko = ua.indexOf('Gecko') != -1;

var $Safari = ua.indexOf('Safari') != -1;

var $Opera = ua.indexOf('Opera') != -1;

var $Mac = ua.indexOf('Mac') != -1;

var $NS7 = ua.indexOf('Netscape/7') != -1;

var $NS71 = ua.indexOf('Netscape/7.1') != -1;



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){



var r = function (){

  

   var s=arguments.callee;

  

   var args = [];

   for (var i=0;i<s.length;i++) args[i]=s[i];

   var argStr = args.join(",");

   if (argStr.length > 0) argStr=","+argStr;

  

   var callStr="s.thiz[s.fn]("+argStr+")";

   var v=eval(callStr);

  

  

   if (s.rv!=null) {

    return s.rv;

   } else {

    return v;

   }

}



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.borderBo ttomWidth.length==0){

    

     var l=n.offsetWidth;

     t.borderLeftWidth="0px";

     l-=n.offsetWidth; 



     var r=n.offsetWidth;

     t.borderRightWidth="0px";

     r-=n.offsetWidth;

    

     var o=n.offsetHeight;

     t.borderTopWidth="0px";

     o-=n.offsetHeight;

    

     var b=n.offsetHeight;

     t.borderBottomWidth="0px";

     b-=n.offsetHeight;

    

     t.borderLeftWidth=l+"px";

     t.borderTopWidth=o+"px";

     t.borderRightWidth=r+"px";

     t.borderBottomWidth=b+"px";

    

     var s={l:l,r:r,t:o,b:b,x:l,y:o};

    

     

     return s;

    } else {

     var s= {

       x: this.parseInt(n.style.borderLeftWidth),

       y: this.parseInt(n.style.borderTopWidth),

       r: this.parseInt(n.style.borderRightWidth),

       b: this.parseInt(n.style.borderBottomWidth)

      };

     s.l=s.x;

     s.t=s.y;

     return s;

    }

   }

},



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&nb sp;= 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 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     : 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>

 

版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/234.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 



我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册