<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <style>. div_float img{width:100px;} </style> <body> <!--floating box--> <div class= "div_float" id= "div_float" ></div> <script Lang uage= "JavaScript" > var otop=0;//the top of the current window var obottom=0;//the bottom function Myobjectfloatphotos of the current window (_id,_title,_url,_src ) {//custom object, specific picture information this.id=_id; This.title=_title; This.url=_url; THIS.SRC=_SRC; function Myobjectfloatposition (xon,yon,xpos,ypos,_div,interval) {//Floating Layer object This.xon=xon; This.yon=yon; This.xpos=xpos; This.ypos=ypos; This.div=_div; This.interval=interval; Record duplicate key codes for canceling circular events} var step = 1; var delay = 30; Cycle interval var height = 0; var hoffset = 0; var woffset = 0; var pause = true; function Changeposbyid (_id) {for (var i=0;i <arraymyobjectfloatphotos.length;i++) {if (_id==arraymyobjectfloatphotos[i].id) Changeposall (Arraymyobjectfloatposition[i]); } function Changeposall (_myobj) {//Specific location modification method width = document.body.clientWidth; Height = document.body.clientHeight; Hoffset = _myobj.div.offsetheight; Woffset = _myobj.div.offsetwidth; _myobj.div.style.visibility = "visible"; _myobj.div.style.left = _myobj.xpos + document.body.scrollLeft; _myobj.div.style.top = _myobj.ypos + document.body.scrollTop; if (_myobj.yon) {_myobj.ypos = _myobj.ypos + step; else {_myobj.ypos = _myobj.ypos-step; /* * The current window is fluttering/if (_myobj.ypos < otop) {_myobj.yon = 1; _myobj.ypos = Otop; } if (_myobj.ypos >= (Obottom-hoffset)) {_myobj.yon = 0; _myobj.ypos = (obottom-hoffset); /*///if (_myobj.xon) {_myobj.xpos = _myobj.xpos + step in the current window; else {_myobj.xpos = _myobj.xpos-step; } if (_myobj.xpos < 0) {_myobj.xon = 1; _myobj.xpos = 0; } if (_myobj.xpos >= (Width-woffset)) {_myobj.xon = 0; _myobj.xpos = (width-woffset); }} functIon Start () {//all floating layers begin to float createfloatdiv (); for (var i=0;i <arraymyobjectfloatposition.length;i++) {my_setinterval (arraymyobjectfloatposition[i].div); } function My_float_div_hid (hiddivid) {//Hidden method document.getElementById (hiddivid). style.display= ' None '; function My_setinterval (_div) {//Set a floating layer loop for (var i=0;i <arraymyobjectfloatposition.length;i++) {if (_div.id==ar raymyobjectfloatposition[i].div.id) {arraymyobjectfloatposition[i].interval= setinterval (' ChangePos ' + Arraymyobjectfloatphotos[i].id+ ' () ', delay); }} function My_clearinterval (_div) {//clear a floating layer loop for (var i=0;i <arraymyobjectfloatposition.length;i++) {if _div. Id==arraymyobjectfloatposition[i].div.id) {clearinterval (arraymyobjectfloatposition[i].interval); }} var arraymyobjectfloatposition= new Array (); function Createfloatdiv () {//stitching floating layer HTML for (var i=0;i <arraymyobjectfloatphotos.length;i++) {var temp_str= '; temp_str+= ' <div id=\ ' float_div_ ' +arraymyobjectfloatphotos[i].id + 'Style=\ ' Position:absolute; Left:311;top:815;visibility:hidden;vertical-align:top;\ ' onmouseover=\ ' my_clearinterval (this); \ ' Onmouseout=\ ' my _setinterval (this), \ ' align= ' right ' > '; temp_str+= ' <div style=\ '/*position:absolute;top:-2;right:-2;*/cursor:hand;color:red;font-size:12px; Font-weight:bold;text-align:center;border: #7C4707 solid 0px;background-color: #DBE4F9;p adding-top:2px;\ ' onclick= My_float_div_hid (\ ' float_div_ ' +arraymyobjectfloatphotos[i].id + ') title=\ ' close window \ ' > Close </div> '; temp_str+= ' <div></div> '; temp_str+= ' </div> '; document.getElementById (' Div_float '). InnerHTML = document.getElementById (' div_float '). Innerhtml+temp_str; for (var i=0;i <arraymyobjectfloatphotos.length;i++) {var _left=0; if (i==0) _left=20; else _left = document.body.clientwidth/(arraymyobjectfloatphotos.length-1) *i; var _myobjectfloatposition=new myobjectfloatposition (0,0,_left,document.body.clientheight, document.getElementById (' float_div_ ' +arraymyobjectfloatphotos[i].id), NULL); Arraymyobjectfloatposition.push (_myobjectfloatposition); }/* The following code is mainly set to have several floating boxes/try {var arraymyobjectfloatphotos= new Array (); var _myobjectfloatphotos=new myobjectfloatphotos (', ', ', ', ', '); _myobjectfloatphotos=new myobjectfloatphotos (' 75229 ', ' Welcome to Expo ', ' # ', '/upload/2010-3/20100315203532753.gif '); Arraymyobjectfloatphotos.push (_myobjectfloatphotos); function changePos75229 () {Changeposbyid (' 75229 ');} _myobjectfloatphotos=new myobjectfloatphotos (' 75230 ', ' Welcome to Expo ', ' # ', '/upload/2010-3/20100315203532753.gif '); Arraymyobjectfloatphotos.push (_myobjectfloatphotos); Create a new floating layer entity and place the array function changePos75230 () {Changeposbyid (' 75230 ');}//unfinished so that the floating box does not affect each other, you must set a different interval value start (); Start execution of the catch (err) {} var Sys = {}; The following code is the judge in Firefox to hide it, there are some problems, said to be inconsistent with the specification but I always find var ua = Navigator.userAgent.toLowerCase (); if (document.getboxobjectfor) {Sys.firefox = Ua.match (/firefox\/([\d.] +)/) [1] if (sys.firefox) {document.getElementById (' div_float '). style.display= ' None '; }} </SCRIPT> <!--floating box--> <div id= "Div_absmiddle" > </div><!--the div is absolutely centered--> <script> var delay = 3 0; Cyclic interval setinterval (' disposition () ', delay); The following function disposition () {otop=document.documentelement.scrolltop) to obtain the visible height of the current window; Obottom=div_absmiddle.offsettop*2 + div_absmiddle.offsetheight-20 + document.documentElement.scrollTop; } </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]