javascript实现的在当前窗口中漂浮框的代码_布局与层

<style> .div_float img{width:100px;} </style> <!--漂浮框--> <div class="div_float" id="div_float"></div> <script language="javascript"> var oTop=0;//当前窗口的顶部 var oBottom=0;//当前窗口的底部 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; //记录重复的键码，用于取消循环事件 } var step = 1; var delay = 30; //循环间隔 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; } /*当前窗口中飘动*/ 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; } 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){ //设置某个浮动层循环 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){//清除某个浮动层循环 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 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=\'关闭窗口\'>关闭</script>

'; temp_str+='

'; temp_str+=''; document.getElementById('div_float').innerHTML = document.getElementById('div_float').innerHTML+temp_str; } for(var i=0;i

 

<script> var delay = 30; //循环间隔 setInterval('disPosition()', delay); //以下函数为获得当前窗口的可见高度 function disPosition(){ oTop=document.documentElement.scrollTop; oBottom=div_absmiddle.offsetTop*2 + div_absmiddle.offsetHeight - 20 + document.documentElement.scrollTop; } </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]