软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：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 rrayMyObjectFloatPosition.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 rrayMyObjectFloatPosition.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 rrayMyObjectFloatPosition.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 ; 
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> 
<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>

技术文章快速查找

javascript 函数速查表

浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)

可拖动窗口，附带鼠标控制渐变透明，开启关闭功能

javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来

我的Node.js学习之路（一）

JavaScript 点击页面上的按纽，弹出层，背景变灰

JQuery扩展插件Validate 3通过参数设置错误信息

JS模拟的QQ面板上的多级可展开的菜单

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建