Simple realization JS floating frame _javascript Skill

This example for you to share the JS floating box implementation code, for your reference, the specific content as follows

First, add the following CSS code to the page that you want to add to the floating box:

<!--floating window style CSS begin--> <style type= "Text/css" > #msg_win {border:1px solid #A67901;
  Background: #EAEAEA;
  width:240px;
  Position:absolute;
  right:0;
  font-size:12px;
  font-family:arial;
  margin:0px;
  Display:none;
  Overflow:hidden;
z-index:99;
  } #msg_win. icos {position:absolute;
  top:2px;
  *top:0px;
  right:2px;
Z-index:9;
  }. Icos a {float:left;
  Color: #833B02;
  margin:1px;
  Text-align:center;
  Font-weight:bold;
  width:14px;
  height:22px;
  line-height:22px;
  padding:1px;
  Text-decoration:none;
Font-family:webdings;
  }. icos a:hover {color: #fff;} #msg_title {background: #BBDEF6;
  border-bottom:1px solid #A67901;
  border-top:1px solid #FFF;
  border-left:1px solid #FFF;
  Color: #000;
  height:25px;
  line-height:25px;
text-indent:5px;
  } #msg_content {margin:5px;
  margin-right:0;
  width:230px;
  height:126px;
Overflow:hidden; } </style> <!--floating window style CSS End-->

two. js Code (Note: This code adds the entire page to the end, the purpose is to load it when the page load completes)

<!--floating window JS, must be placed to the last begin--> <script type= "Text/javascript" > var message={set:function () {//Minimize and restore state switching var set=this.minbtn.status = 1?
    [0,1, ' block ', this.char[0], ' Minimize ']:[1,0, ' none ', this.char[1], ' expand ';
    THIS.MINBTN.STATUS=SET[0];
    THIS.WIN.STYLE.BORDERBOTTOMWIDTH=SET[1];
    This.content.style.display =set[2];
    This.minbtn.innerHTML =set[3] this.minbtn.title = set[4];
  This.win.style.top = This.gety (). Top;
    }, Close:function () {//close This.win.style.display = ' none ';
  Window.onscroll = null; }, Setopacity:function (x) {//set transparency var v = x >= 100?
    ': ' Alpha (opacity= ' + x + ') '; this.win.style.visibility = x<=0? '
    Hidden ': ' Visible ';//ie a bug with absolute or relative positioning content that does not change with the parent's opacity this.win.style.filter = v;
  this.win.style.opacity = x/100;
    }, Show:function () {//Fade clearinterval (THIS.TIMER2);
    var me = This,fx = this.fx (0, 0.1), t = 0;
      This.timer2 = setinterval (function () {t = FX ();
      Me.setopacity (T[0]);if (t[1] = = 0) {clearinterval (Me.timer2)}},10); }, Fx:function (A, B, c) {//buffered compute var Cmath = math[(a-b) > 0? "Floor": "ceil"],c = C | |
    0.1; return function () {return [A + = Cmath (b-a) * c), A-b]}}, Gety:function () {//compute move coordinates var d = document,b = doc
    Ument.body, E = document.documentelement;
    var s = Math.max (B.scrolltop, e.scrolltop);
    var h =/backcompat/i.test (Document.compatmode)? B.clientheight:e.clientheight;
    var h2 = This.win.offsetHeight; return {foot:s + H + H2 + ' px ', top:s + h-h2-2+ ' px '}}, Moveto:function (y) {//Mobile animation clearinterval (This.time
    R); var me = This,a = parseint (this.win.style.top) | |
    0;
    var FX = this.fx (A, parseint (y));
    var t = 0;
      This.timer = setinterval (function () {t = FX ();
      Me.win.style.top = t[0]+ ' px ';
        if (t[1] = = 0) {clearinterval (Me.timer);
      Me.bind ();
  }},10);
    }, Bind:function () {//bound window scroll bar and size Change event var me=this,st,rt; Window.onsCroll = function () {cleartimeout (ST);
      Cleartimeout (ME.TIMER2);
      Me.setopacity (0);
      st = settimeout (function () {me.win.style.top = Me.gety (). Top;
      Me.Show ();
    },600);
    };
      Window.onresize = function () {cleartimeout (RT);
    RT = SetTimeout (function () {me.win.style.top = Me.gety (). top},100);
    }, Init:function () {//Create HTML function $ (ID) {return document.getElementById (ID)};
    this.win=$ (' Msg_win ');
    var set={minbtn: ' Msg_min ', closebtn: ' Msg_close ', title: ' Msg_title ', content: ' Msg_content '};
    for (var Id in set) {This[id] = $ (set[id])};
    var me = this;
    This.minbtn.onclick = function () {me.set (); This.blur ()};
    This.closebtn.onclick = function () {me.close ()}; This.char=navigator.useragent.tolowercase (). IndexOf (' Firefox ') +1?
    [' _ ', ':: ', ' x ']:[' 0 ', ' 2 ', ' R '];//ff does not support webdings font this.minbtn.innerhtml=this.char[0];
    THIS.CLOSEBTN.INNERHTML=THIS.CHAR[2]; settimeout (function () {//Initialize first position me.win.styLe.display = ' block ';
      Me.win.style.top = Me.gety (). Foot;
    Me.moveto (Me.gety (). top);
    },0);
  return this;
}
};
Message.init (); </script> <!--floating window JS end-->

three. html code (Note: This code is to be placed at the end of the body)

<!--floating window HTML code begin-->
 
 

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.