javascript实现的在当前窗口中漂浮框的代码

更新时间：2010年03月15日 20:35:35 作者：

javascript实现的在当前窗口中漂浮框的代码，代码中有注释，需要学习的朋友可以参考下。

<!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 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=\'关闭窗口\'>关闭</div>'; temp_str+='<div><a href=\''+arrayMyObjectFloatPhotos[i].url+'\' title=\''+arrayMyObjectFloatPhotos[i].title +'\' target=\'_blank\'><img border=\'0\' src=\''+arrayMyObjectFloatPhotos[i].src +'\' alt="" /></a></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); } } /*以下代码主要是设置要有几个浮动框*/ try { var arrayMyObjectFloatPhotos= new Array(); var _MyObjectFloatPhotos=new MyObjectFloatPhotos('','','',''); _MyObjectFloatPhotos=new MyObjectFloatPhotos('75229','迎世博','#','/upload/2010-3/20100315203532753.gif&#8217;); arrayMyObjectFloatPhotos.push(_MyObjectFloatPhotos); function changePos75229() {changePosByID('75229');} _MyObjectFloatPhotos=new MyObjectFloatPhotos('75230','迎世博','#','/upload/2010-3/20100315203532753.gif'); arrayMyObjectFloatPhotos.push(_MyObjectFloatPhotos); //创建新的浮动层实体，并放入数组 function changePos75230() {changePosByID('75230');} //未了使浮动框不相互影响，必须设定不同的 interval 值 start(); //开始执行 } catch(err) {} var Sys = {}; //以下代码是判断在火狐中将其隐藏，还有些问题，说是不符合规范但我始终找不出 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 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">&nbsp;</div> <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> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

js 左右悬浮对联广告特效代码
一段js 左右悬浮广告特效代码，js制作web网页左右悬浮广告特效，左右悬浮广告通常也称为对联广告，需要的朋友参考下
2014-12-12
js 页面左右两侧居中广告代码
js 页面左右两侧居中广告代码,里面的代码还不错
2012-03-03
点弹代码点击页面任何位置都可以弹出页面效果代码
有时候需要点击页面任何位置都可以弹出页面效果，多用于游戏，导航类网站推广
2012-09-09
带你快速上手前端响应式布局与Bootstrap栅格系统
这篇文章带你快速上手前端响应式布局与Bootstrap栅格系统,响应式布局主要是针对各种不同尺寸的屏幕兼容性问题,需要的朋友可以参考下
2023-03-03
仿Discuz!的论坛评分发帖弹出提示并渐渐消失的效果
仿Discuz!论坛评分发帖弹出提示并渐渐消失的效果，相信不少朋友都见到过这效果吧
2010-10-10
js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数
一个完美的JS拖拽功能，实现层在网页上任意拖动，还可回放拖动规迹，而且在拖动时显示拖动距离参数等相关属性。经本人测试兼容性也是相当不错的代码，学习JavaScript的朋友，可以拿来研究研究，您可不要错过哦
2012-12-12
可在线编辑网页文字效果代码(单击)
可在线编辑网页文字效果代码，点击即可编辑文字，喜欢的朋友可以参考下
2013-03-03
基于jQuery的弹出隐藏层的窗口特效
jQuery弹出隐藏层的窗口特效，缺少了几个小图片，这个自己制作几个补上去吧，这不是关键的东西。
2011-08-08
Tips 带三角可关闭的文字提示
多功能Tips，带小三角的文字提示，可关闭，有两套颜色方案可选择，可按你的要求将显示框定义显示在四个方向，放大或缩小浏览器窗口，不会有丝毫偏差。
2010-10-10
据说是Google首页的网页模块拖动代码
据说是Google首页的网页模块拖动代码，Google很早就应用了网页拖动特效，不知大家发现没？本款拖动特效可以说是完全模仿了Google的拖动代码，比较有代表性，因此也很有参考价值，奉献给大家，仅供参考。
2010-09-09