`
莘雨77
  • 浏览: 3130 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
社区版块
存档分类
最新评论

移动的js浮动窗口

    博客分类:
  • js
阅读更多


// JavaScript Document
getId=function(id){
return id=typeof string==id?id:document.getElementById(id);
}

function get(){
return {
X:document.documentElement.clientWidth||document.body.clientWidth||window.innerWidth,
Y:document.documentElement.clientHeight||document.body.clientheight||window.innerHeight
}
}
var floatFrame=new Object()
this.floatFrame=function(pId,style,title,content,time,x,y,l,t,cd){
var _this=this;
_this.pId=pId;
_this.style=style;
_this.title=title;
_this.content=content;
_this.time=time;
_this.x=x;
    _this.y=y;
_this.l=l;
_this.t=t;
_this.cd=cd;
    _this.init=function(n){
document.write("<div name='float_frame' style='"+_this.style+"' id="+_this.pId+">"
   +"<span id='closeDiv' style='cursor:pointer; position:absolute;top:0px;right:0px;display:none;'>[X]</span>"
       +"<div name='title' id='titleId"+n+"'></div>"
   +"<div name='content' id='contentId"+n+"'></div></div>");
   this.setTitle(_this.title,n);
   this.setContent(_this.content,n);
   _this.id=getId(_this.pId);
   this.setCloseDiv();
   this.Start();

   getId("closeDiv").onclick=function(){
   _this.Stop()
               _this.id.style.display="none";
   }
  _this.id.onmouseover=function(){
     _this.Stop();
  }
   _this.id.onmouseout=function(){
     _this.Start();
  }  
   }
_this.setTitle=function(tc,n){
getId("titleId"+n).innerHTML="<p>"+tc+"</p>";
}
_this.setContent=function(cc,n){
getId("contentId"+n).innerHTML="<h3>"+cc+"</h3>";
}
_this.setPosition=function(left,top){
left+=document.documentElement.scrollLeft||document.body.scrollLeft;
top+=document.documentElement.scrollTop||document.body.scrollTop;
_this.id.style.left=left+"px";
_this.id.style.top=top+"px";
}
_this.run=function(){
width=_this.id.style.width.split("px")[0];
height=_this.id.style.height.split("px")[0];

if(_this.x<=0){
_this.x=0;
_this.l=true;
}

else if(_this.x>=get().X-width){
_this.x=get().X-width;
_this.l=false;
}

   if(_this.l){
_this.x++;
}
else{
_this.x--;
}
 
if(_this.y>=get().Y-height){
_this.y=get().Y-height;
_this.t=false;
}
else if(_this.y<0){
_this.y=0;
_this.t=true;
}
if(_this.t){
_this.y++;
}
else{
_this.y--;
}

_this.setPosition(_this.x,_this.y)
}
_this.Stop=function(){
  clearInterval(timer);
}
_this.Start=function(){
timer=setInterval(_this.run,_this.time);
}
_this.setCloseDiv=function(){
if(_this.cd){getId("closeDiv").style.display="block";}
else{
  getId("closeDiv").style.display="none";
}
}

}


<script type="text/javascript">

var div1= new floatFrame(
"floatFrameId1",
"border:2px red solid;width:240px; height:120px; position:absolute;",
"",
"浮动框内容",
5,
100,
100,
true,
false,
true
  );

div1.init(0);  
</script>
分享到:
评论

相关推荐

    html可以移动的浮动窗口

    在网页设计中,HTML(超文本标记语言)是构建...总的来说,创建一个可以移动的HTML浮动窗口涉及HTML结构、CSS定位以及可能的JavaScript事件处理,这些技术都是前端开发中的基础技能,对于提升用户体验有着重要作用。

    js弹出可移动可关闭浮动窗口并灰化背景

    在JavaScript(简称JS)编程中,创建一个可移动、可关闭且带有灰化背景的浮动窗口是一项常见的需求,尤其在用户交互和提示信息显示时。这个功能可以使用户聚焦于特定的对话框,同时防止他们在处理关键操作时被其他...

    可拖动的JS浮动窗口类(调用方便)

    "可拖动的JS浮动窗口类"是指一种允许用户通过鼠标拖动来改变窗口位置的JavaScript实现。这种功能提高了用户体验,因为它使用户能够根据需要自由地调整窗口的位置,以便于阅读或操作。 创建一个可拖动的JS浮动窗口...

    一个支持拖动和关闭的JS浮动窗口插件.rar

    《JS浮动窗口插件详解与应用》 在网页设计中,弹出层和浮动窗口是常见且实用的交互元素,它们能够提供丰富的信息展示和用户交互体验。本文将深入探讨一款由国内JS达人Andyfoo开发的支持拖动和关闭功能的JS浮动窗口...

    Jquery插件之浮动窗口(DIV)

    本文将探讨如何利用jQuery开发一个具备移动、关闭以及移动时半透明效果的浮动窗口插件。 首先,我们需要在HTML结构中创建一个用于承载浮动窗口的`div`元素。这个`div`通常会包含我们需要展示的内容,例如文字、图片...

    QQ 在线客服 浮动窗口

    【QQ在线客服浮动窗口】是一种常见于网站或应用中的交互设计,它允许用户在使用其他功能的同时方便地与客服人员进行沟通。QQ作为中国最流行的即时通讯工具之一,其在线客服系统被广泛应用于各类企业网站,为用户提供...

    jQuery可拖动右下角浮动窗口特效.zip

    本项目“jQuery可拖动右下角浮动窗口特效”就是基于jQuery实现的一种用户界面交互功能,旨在提供一个可自由移动且能自适应浏览器窗口大小的浮动窗口。这种效果常见于弹出提示框、广告浮窗或设置面板,能够提升用户的...

    浮动窗口

    浮动窗口在IT行业中通常指的是那些在用户界面中可以自由移动、不会被其他元素遮挡的窗口组件,常见于各种软件和网页设计中。这种技术在实现动态广告、通知提示、设置面板等方面非常实用。在本篇文章中,我们将深入...

    jQuery版简单易用的可拖动右下角浮动窗口.zip

    总结来说,“jQuery版简单易用的可拖动右下角浮动窗口”是一个利用jQuery实现的实用工具,通过结合JavaScript事件处理和CSS定位技术,为网页提供了一种灵活、可定制的浮动窗口解决方案。这样的组件对于提升网页的...

    用JS实现网页浮动窗口随窗口滚动(类似于客服窗口)

    本文介绍了如何使用JavaScript和CSS来实现在网页上添加一个能够随着页面滚动而移动的浮动窗口。这种技术在很多场景下都非常有用,比如在线客服系统、广告推送或帮助菜单等。通过上述方法,我们可以轻松地将这一功能...

    jquery右下角浮动窗口.zip

    7. **响应式设计**:考虑到不同设备和屏幕尺寸,开发者可能还需要考虑浮动窗口的响应式设计,以适应移动设备和桌面浏览器,这需要对CSS媒体查询(Media Queries)有了解。 综上所述,"jquery右下角浮动窗口"项目...

    javascript实现可以拖动的浮动窗口;源代码

    在这个场景中,我们关注的是使用JavaScript来实现一个可以拖动的浮动窗口功能。这种技术常用于创建更加交互性和用户友好的网页元素,如对话框、通知或者自定义控件。 实现拖动功能的关键在于监听用户的鼠标事件,...

    JSP 可拖拽浮动窗口

    **浮动物件技术详解——基于JavaScript的JSP可拖拽浮动窗口** 在Web开发中,为了提供更加丰富和交互式的用户体验,我们常常需要创建能够浮动并可自由拖拽的窗口。这种技术通常被称为浮动物件(Floating Widget)或...

    浮动登录窗口和窗口移动

    在IT领域,浮动登录窗口和窗口移动是两个与用户界面交互和用户体验紧密相关的概念。它们在软件设计和开发中占据着重要地位,特别是在构建高效、直观的用户界面时。 首先,我们来详细讨论“浮动登录窗口”。浮动登录...

    新浪奥运频道的Js右下角浮动窗口代码打包

    新浪奥运频道的Js右下角浮动窗口代码打包主要涉及到JavaScript这一编程语言,特别是与网页动态效果和用户体验相关的技术。JavaScript是一种轻量级的解释型编程语言,广泛应用于Web开发,用于实现网页的交互性和动态...

    JS右下角弹出可滚动的新闻列表浮动窗口

    在网页设计中,"JS右下角弹出...综上所述,"JS右下角弹出可滚动的新闻列表浮动窗口"是一个集JavaScript编程、CSS样式和用户体验设计于一体的网页开发技术。理解和掌握这个知识点,有助于提升网页交互性和信息传递效率。

    仿阿里妈妈的右下角浮动窗口

    - 阿里妈妈的浮动窗口可能还包含一些高级功能,如定时显示、自动关闭、消息推送等,这些可以通过更复杂的JavaScript逻辑或第三方库实现。 - 考虑到兼容性和性能,开发者可能需要使用现代前端框架(如React、Vue或...

    页面中的浮动窗口.doc

    总结来说,实现浮动窗口的关键在于JavaScript的DOM操作和CSS的定位属性。JavaScript负责动态生成和调整元素位置,CSS负责定义元素的布局属性。这些技术在现代网页设计中非常常见,它们使得网页可以有更丰富的交互性...

    网页浮动广告窗口

    网页浮动广告窗口是一种常见的网页设计技术,用于在用户浏览页面时始终显示特定的广告或信息。这种技术通过JavaScript实现,可以将广告放置在屏幕的右侧或左侧,甚至可以设置为固定位置,使得无论用户滚动页面,广告...

    新浪右下角浮动窗口有关闭功能

    3. **JavaScript和CSS实现**:在技术层面,新浪的右下角浮动窗口及其关闭功能可能是通过JavaScript动态生成和控制的,而CSS用于定位和样式设置,使得窗口能够始终固定在屏幕的右下角,并可被用户方便地关闭。...

Global site tag (gtag.js) - Google Analytics