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 = (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 '; 
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><img border=\'0\' src=\''+arrayMyObjectFloatPhotos[i].src +'\' alt="" /></div>'; 
temp_str+='</div>'; 
document.getElementById('div_float').innerHTML = document.getElementById('div_float').innerHTML+temp_str; 
} 
for(var i=0;i  
<!--漂浮框--> 
<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"> </div><!--该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需刷新才能执行]
上一个：JQuery 常用操作代码
下一个：Jquery Ajax学习实例3 向WebService发出请求，调用方法返回数据
更多图片编程知识: