JavaScript implementation of the floating box in the current window code _ layout and layer

Source: Internet
Author: User
Tags setinterval visibility
<! 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 '; }} &LT;/SCRIPT&GT <!--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]
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.