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

.div_float img{width:100px;}

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 = (width - Woffset)) {
_myObj.xon = 0;
_myObj.xPos = (width - Woffset);
}
}
function start() { //所有浮动层开始漂浮
createFloatDiv();
for(var i=0;i ';
temp_str+='

关闭

';
temp_str+='

';
temp_str+='

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

var delay = 30; //循环间隔
setInterval('disPosition()', delay); //以下函数为获得当前窗口的可见高度
function disPosition(){
oTop=document.documentElement.scrollTop;
oBottom=div_absmiddle.offsetTop*2 + div_absmiddle.offsetHeight - 20 + document.documentElement.scrollTop;
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例

    本文实例讲述了JS实现可缩放.拖动.关闭和最小化的浮动窗口方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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

  • JavaScript实现上下浮动的窗口效果代码

    JavaScript实现上下浮动的窗口效果代码

    本文实例讲述了JavaScript实现上下浮动的窗口效果代码.分享给大家供大家参考.具体如下: 这里介绍使用JavaScript实现上下浮动的窗口,在垂直方向上漂浮,代码内的JS函数有超丰富的浮动层定义功能,像浮动层位置高度.初始化事件触发器.设定浮动层为可见,用style.left设定浮动层左边距.浮动层的运动速度等,还有更多的设置选项都能实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-up-down-float-move-win

  • JS控制弹出悬浮窗口(一览画面)的实例代码

    JS控制弹出悬浮窗口(一览画面)的实例代码

    在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息.如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好.如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖.下面我以某个对日电子商务网站为实例说明下它的实现方式. 1.jsp页面上弹出层的代码 <!-- 物流详情弹出页面 start --> <s:iterator value="lrVo" var="lrVo" id=&qu

  • JS实现简单易用的手机端浮动窗口显示效果

    JS实现简单易用的手机端浮动窗口显示效果

    本文实例讲述了JS实现简单易用的手机端浮动窗口显示效果.分享给大家供大家参考,具体如下: html: <style type="text/css"> .fdBonTel{ width:100%; height:53px; position:fixed; background:#0052ae; text-align:center; left:0; bottom:0; z-index:999; } .fdOnline{ background:url(index/images/o

  • JavaScript 悬浮窗口实现代码

    JavaScript 悬浮窗口实现代码

    效果如图:代码如下: 悬浮窗口示例 window.onscroll = function () { var div = document.getElementById("divSuspended"); div.style.top = document.body.scrollTop; } window.onresize = window.onscroll; function init(){ var df = document.createDocumentFragment(); for(v

  • JS简单实现浮动窗口效果示例

    JS简单实现浮动窗口效果示例

    本文实例讲述了JS简单实现浮动窗口效果.分享给大家供大家参考,具体如下: HTML部分: <!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"> &l

  • 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"&g

  • JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

    JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

    本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动 注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度. 注:在火狐或chrome下效果最佳,IE8下可能有些小问题. 点击此处查看运行效果: http://demo.jb51.n

  • JS实现悬浮移动窗口(悬浮广告)的特效

    js方法: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <title> New Document </title>        <meta name="Gener

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

    .div_float img{width:100px;} 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,

  • javascript 弹出窗口中是否显示地址栏的实现代码

    Question : 在IE 7中弹出页面后,总是会显示地址栏,而该地址栏是不希望在程序中出现的,况且也影响美观.而在IE6中就不会出现地址栏. Solution: 工具-->Internet 选项-->安全-->自定义级别-->允许网站打开没有地址栏或状态栏的窗口-->允许 这样设置了IE7后就不会在弹出窗口中出现地址栏了.IE7以及后续版本默认不可以打开不带地址栏的窗口,这样是为了安全起见. javascript的window.open也可以用来弹出新页面,而且通过设置参

  • javascript中window.open在原来的窗口中打开新的窗口(不同名)

    javascript中window.open在原来的窗口中打开新的窗口(不同名)

    最近做一个JSP网页要求打开一个没有菜单工具栏的IE,想到用window.open 来打开.但是发现如果先前打开的窗体没有关掉,在打开一个窗体的时候就会在先前没有关闭的窗体上打开新的窗体,这样先前的窗口就被替换掉了.经过查找资料和测试发现如果在打开窗体的时候指定的窗体名和当前的某个窗体同名的时候就会在那个窗体上打开.例如下面的情况: window.open("view_svg.jsp?ukey=<%=ukey%>&itemID=<%=itemID%>&ch

  • JavaScript窗口功能指南之在窗口中书写内容

    window.open()方法打开一个新窗口,document.open()方法打开一个新文档,在其中可以使用write()或者writeln()方法书写内容,它的语法是:  oNewDoc = document.open(sMimeType[, sReplace]);  sMineType是一个字符串,它定义了MIME类型.Navigator支持几种不同的MIME类型,但是Internet Explorer当前仅仅支持"text/html".sMineType参数是可选的.第2个参数

  • JAVASCRIPT模式窗口中下载文件无法接收iframe的流

    在打开的模式窗口中,如果要借助于模式窗口接受服务器的流,通常需要隐藏一个iframe;有时候,然后采用iframe.src的形式去做请求:有时,在下载时发现服务器无法接收iframe的流,因为在模式窗口中没有触发iframe的src重新定向事件,普通的窗口无此问题. 具体解决办法: 在模式窗口的父窗口中隐藏一个iframe,下载的地址指向这个iframe.

  • javascript css在IE和Firefox中区别分析

    一.document.formName.item("itemName") 问题  问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

  • javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    HTML精确定位属性:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对

  • javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法

    在系统中,会一些地方使用javascript open window.比如打开固定模式的窗口,防止用户进行其他操作. 参数: 复制代码 代码如下: 参数 | 取值范围 | 说明alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 depended | yes/no | 是否和父窗口同时关闭 directories | yes/no | Nav2和3的目录栏是否可见 height | pixel v

  • JavaScript实现获取用户单击body中所有A标签内容的方法

    本文实例讲述了JavaScript实现获取用户单击body中所有A标签内容的方法.分享给大家供大家参考,具体如下: var tbody = document.body; tbody.onclick = function (e) { getUrl(e); } function getUrl(e) { e = e || event; var target = e.target || e.srcElement, href; alert(target.tagName); //获取到A标签中的onclic

  • JavaScript入门教程(6) Window窗口对象

    JavaScript中的Window窗口对象 他是JavaScript中最大的对象,它描述的是一个浏览器窗口.一般要引用它的属性和方法时,不需要用"window.xxx"这种形式,而直接使用"xxx".一个框架页面也是一个窗口. Window窗口对象有如下属性: name 窗口的名称,由打开它的连接(<a target="...">)或框架页(<frame name="...">)或某一个窗口调用的 o

随机推荐