首页 > 网络编程 > JavaScript > 网页特效 > 布局与层 > javascript 漂浮框

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需刷新才能执行]

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

您可能感兴趣的文章: