javascript實(shí)現(xiàn)的在當(dāng)前窗口中漂浮框的代碼

2019-11-21 00:40:28

字體：大中小

供稿：網(wǎng)友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .div_float img{width:100px;} </style> <body>  <div   id="iwvjtn8m0"   class="div_float" id="div_float"></div> <script language="javascript"> var oTop=0;//當(dāng)前窗口的頂部 var oBottom=0;//當(dāng)前窗口的底部 function MyObjectFloatPhotos(_id,_title,_url,_src) { //自定義對象，具體圖片信息 this.id=_id; this.title=_title; this.url=_url; this.src=_src; } function MyObjectFloatPosition(xon,yon,xPos,yPos,_div,interval) { //浮動層對象 this.xon=xon; this.yon=yon; this.xPos=xPos; this.yPos=yPos; this.div=_div; this.interval=interval; //記錄重復(fù)的鍵碼，用于取消循環(huán)事件 } var step = 1; var delay = 30; //循環(huán)間隔 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) { //具體的位置修改方法 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; } /*當(dāng)前窗口中飄動*/ if (_myObj.yPos < oTop) { _myObj.yon = 1; _myObj.yPos = oTop; } if (_myObj.yPos >= (oBottom - Hoffset)) { _myObj.yon = 0; _myObj.yPos = (oBottom - Hoffset); } /*當(dāng)前窗口中飄動*/ if (_myObj.xon) { _myObj.xPos = _myObj.xPos + step; } 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() { //所有浮動層開始漂浮 createFloatDiv(); for(var i=0;i <arrayMyObjectFloatPosition.length;i++) { my_setInterval(arrayMyObjectFloatPosition[i].div); } } function my_float_div_hid(hiddivid){ //隱藏方法 document.getElementById(hiddivid).style.display='none'; } function my_setInterval(_div){ //設(shè)置某個浮動層循環(huán) for(var i=0;i <arrayMyObjectFloatPosition.length;i++) { if(_div.id==arrayMyObjectFloatPosition[i].div.id){ arrayMyObjectFloatPosition[i].interval= setInterval('changePos'+arrayMyObjectFloatPhotos[i].id+'()', delay); } } } function my_clearInterval(_div){//清除某個浮動層循環(huán) 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(){//拼接浮動層的html for(var i=0;i <arrayMyObjectFloatPhotos.length;i++) { var temp_str=''; temp_str+='<div   class="iwvjtn8m0"   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;padding-top:2px;/' onclick=my_float_div_hid(/'float_div_'+arrayMyObjectFloatPhotos[i].id +'/') title=/'關(guān)閉窗口/'>關(guān)閉</div>'; temp_str+='<div><a href=/''+arrayMyObjectFloatPhotos[i].url+'/' title=/''+arrayMyObjectFloatPhotos[i].title +'/' target=/'_blank/'><img border=/'0/' src=https://www.jb51.net/''+arrayMyObjectFloatPhotos[i].src%20+'/'%20alt=""%20/></a></div>';%20temp_str+='</div>';%20document.getElementById('div_float').innerHTML%20=%20document.getElementById('div_float').innerHTML+temp_str;%20}%20for(var%20i=0;i%20<arrayMyObjectFloatPhotos.length;i++)%20{%20var%20_left=0;%20if(i==0)_left=20;%20else%20_left%20=%20document.body.clientWidth/(arrayMyObjectFloatPhotos.length-1)*i;%20var%20_MyObjectFloatPosition=new%20MyObjectFloatPosition(0,0,_left,document.body.clientHeight,document.getElementById('float_div_'+arrayMyObjectFloatPhotos[i].id),null);%20arrayMyObjectFloatPosition.push(_MyObjectFloatPosition);%20}%20}%20/*以下代碼主要是設(shè)置要有幾個浮動框*/%20try%20{%20var%20arrayMyObjectFloatPhotos=%20new%20Array();%20var%20_MyObjectFloatPhotos=new%20MyObjectFloatPhotos('','','','');%20_MyObjectFloatPhotos=new%20MyObjectFloatPhotos('75229','迎世博','#','/upload/2010-3/20100315203532753.gif’); arrayMyObjectFloatPhotos.push(_MyObjectFloatPhotos); function changePos75229() {changePosByID('75229');} _MyObjectFloatPhotos=new MyObjectFloatPhotos('75230','迎世博','#','/upload/2010-3/20100315203532753.gif'); arrayMyObjectFloatPhotos.push(_MyObjectFloatPhotos); //創(chuàng)建新的浮動層實(shí)體，并放入數(shù)組 function changePos75230() {changePosByID('75230');} //未了使浮動框不相互影響，必須設(shè)定不同的 interval 值 start(); //開始執(zhí)行 } catch(err) {} var Sys = {}; //以下代碼是判斷在火狐中將其隱藏，還有些問題，說是不符合規(guī)范但我始終找不出 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>  <div   class="iwvjtn8m0"   id="div_absmiddle" style="background:red;padding-right: 10px; margin-top: -75px; padding-left: 10px; left: 0px; padding-bottom: 10px; width: 75px; line-height: 20px; padding-top: 10px; position: fixed; top: 50%; height: 150px"> </div> <script> var delay = 30; //循環(huán)間隔 setInterval('disPosition()', delay); //以下函數(shù)為獲得當(dāng)前窗口的可見高度 function disPosition(){ oTop=document.documentElement.scrollTop; oBottom=div_absmiddle.offsetTop*2 + div_absmiddle.offsetHeight - 20 + document.documentElement.scrollTop; } </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：js獲取數(shù)組任意個不重復(fù)的隨機(jī)數(shù)組元素原創(chuàng)

下一篇：javascript 用記憶函數(shù)快速計算遞歸函數(shù)