`
真爱无敌
  • 浏览: 23849 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
最近访客 更多访客>>
社区版块
存档分类
最新评论

JS右下角弹出窗口

    博客分类:
  • JS
 
阅读更多
<HTML>
<HEAD>
<TITLE> 右下角提示窗口 </TITLE>
<META NAME="Keywords" CONTENT="提示窗口">
<META NAME="Description" CONTENT="提示窗口">
<script type="text/javascript">
<!--
<!--右下脚弹出窗口开始-->
window.onload = getMsg;
window.onresize = resizeDiv;
window.onerror = function(){}
var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;

function getMsg()
{
  try
  {
   divTop = parseInt(document.getElementById("loft_win").style.top,10);
   divLeft = parseInt(document.getElementById("loft_win").style.left,10);
   divHeight = parseInt(document.getElementById("loft_win").offsetHeight,10);
   divWidth = parseInt(document.getElementById("loft_win").offsetWidth,10);
   docWidth = document.body.clientWidth;
   docHeight = document.body.clientHeight;
   document.getElementById("loft_win").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;// divHeight
   document.getElementById("loft_win").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;
   document.getElementById("loft_win").style.visibility="visible";
   objTimer = window.setInterval("moveDiv()",10);
  }
  catch(e){}
}

//初始化位置
function resizeDiv()
{
  i+=1;
  //if(i>300) closeDiv() //想不用自动消失由用户来自己关闭所以屏蔽这句
  try
  {
   divHeight = parseInt(document.getElementById("loft_win").offsetHeight,10);
   divWidth = parseInt(document.getElementById("loft_win").offsetWidth,10);
   docWidth = document.body.clientWidth;
   docHeight = document.body.clientHeight;
   document.getElementById("loft_win").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
   document.getElementById("loft_win").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
  }
  catch(e){}
}

//最小化
function minsizeDiv()
{
  i+=1
  //if(i>300) closeDiv() //想不用自动消失由用户来自己关闭所以屏蔽这句
  try
  {
   divHeight = parseInt(document.getElementById("loft_win_min").offsetHeight,10);
   divWidth = parseInt(document.getElementById("loft_win_min").offsetWidth,10);
   docWidth = document.body.clientWidth;
   docHeight = document.body.clientHeight;
   document.getElementById("loft_win_min").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
   document.getElementById("loft_win_min").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
  }
  catch(e){}
}

//移动
function moveDiv()
{
try
{
  if(parseInt(document.getElementById("loft_win").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
  {
   window.clearInterval(objTimer);
   objTimer = window.setInterval("resizeDiv()",1);
  }
  divTop = parseInt(document.getElementById("loft_win").style.top,10);
  document.getElementById("loft_win").style.top = divTop -1;
}
  catch(e){}
}

function minDiv()
{
  closeDiv();
  document.getElementById('loft_win_min').style.visibility='visible';
  objTimer = window.setInterval("minsizeDiv()",1);
}

function maxDiv()
{
  document.getElementById('loft_win_min').style.visibility='hidden';
  document.getElementById('loft_win').style.visibility='visible';
  objTimer = window.setInterval("resizeDiv()",1);
  //resizeDiv()
  getMsg();
}

function closeDiv()
{
  document.getElementById('loft_win').style.visibility='hidden';
  document.getElementById('loft_win_min').style.visibility='hidden';
  if(objTimer) window.clearInterval(objTimer);
}
<!--右下脚弹出窗口结束-->
-->
</script>
<style type="text/css">
<!--
#loft_win {border:#0066FF 1px solid;}
#loft_win_min {border:#0066FF 1px solid;}
.loft_win_head {color: #FFFFFF; font-size:13px; background-color:#0066FF; height:25px; padding:0,5,0,5;}
#contentDiv {background-color:#FFFFFF; border:#0066FF 1px solid; border-left-style:none; border-right-style:none;}
a { font-size:12px; color:#000000;}
a:link {font-size:12px; color:#999999; text-decoration:none;}
a:visited { font-size:12px; color:#999999; text-decoration:none;}
a:hover {font-size:13px; color:#999999; text-decoration:none; border:#FF9900 1px dashed; border-left-style:none; border-right-style:none; border-top-style:none;}
a:actived {font-size:12px; color:#000000; text-decoration:none;}
-->
</style>
</HEAD>

<BODY>
<!--提示窗口代码开始-->
<!--初状态-->
<DIV id="loft_win" style="Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden;WIDTH: 250px; POSITION: absolute; TOP: 0px; HEIGHT: 150px;">
  <TABLE cellSpacing=0 cellPadding=0 width="100%" bgcolor="#FFFFFF" border=0>
   <TR>
    <td width="100%" valign="top" align="center">
     <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
       <td width="70" class="loft_win_head">提示窗口</td>
       <td width="26" class="loft_win_head"> </td>
       <td align="right" class="loft_win_head">
        <span style="CURSOR: hand;font-size:12px;font-weight:bold;margin-right:4px;" title=最小化 onclick=minDiv() >- </span><span style="CURSOR: hand;font-size:12px;font-weight:bold;margin-right:4px;" title=关闭 onclick=closeDiv() >×</span>
       </td>
      </tr>
     </table>
    </td>
   </TR>
   <TR>
    <TD height="130" align="center" valign="middle" colSpan=3>
     <div id="contentDiv">
      <table width="100%" height="100%" cellpadding="0" cellspacing="0">
       <tr>
        <td align="center" height="100%">
         <div>
          <a href="http://www.sysapi.com" target="_blank">我还以为你不会来呢!</a>
         </div>
        </td>
       </tr>
      </table>
     </div>
    </TD>
   </TR>
  </TABLE>
</DIV>

<!--最小化状态-->
<DIV id="loft_win_min" style="Z-INDEX:99999; LEFT: 0px; VISIBILITY: hidden;WIDTH: 250px; POSITION: absolute; TOP: 0px;">
  <TABLE cellSpacing=0 cellPadding=0 width="100%" bgcolor="#FFFFFF" border=0>
   <TR>
    <td width="100%" valign="top" align="center">
     <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
       <td width="70" class="loft_win_head">提示窗口</td>
       <td width="26" class="loft_win_head"> </td>
       <td align="right" class="loft_win_head">
        <span title=还原 style="CURSOR: hand;font-size:12px;font-weight:bold;margin-right:4px;" onclick=maxDiv() >□</span><span title=关闭 style="CURSOR: hand;font-size:12px;font-weight:bold;margin-right:4px;" onclick=closeDiv() >×</span>
       </td>
      </tr>
     </table>
    </td>
   </TR>
  </TABLE>
</DIV>
<!--提示窗口代码结束-->
</BODY>
</HTML>
分享到:
评论

相关推荐

    JS右下角弹出窗口代码

    ### JS右下角弹出窗口代码解析与应用 在网页设计与开发中,右下角弹出窗口是一种常见的交互方式,用于提供即时消息、广告或客户服务等。本文将深入解析一个具体的JS右下角弹出窗口代码示例,探讨其工作原理及实现...

    Ajax右下角弹出窗口

    Ajax右下角弹出窗口是一种常见的用户交互设计,它利用Ajax技术实现在不刷新整个页面的情况下,于页面右下角动态展示信息或提示。这种设计不仅提升了用户体验,还能有效地传递实时数据,使得网页更具交互性和响应性。...

    页面右下角弹出窗口

    在"页面右下角弹出窗口"的实现中,主要涉及以下几个关键知识点: 1. **选择器与DOM操作**:jQuery提供了丰富的选择器来选取页面中的元素,如ID选择器(#id),类选择器(.class)等。首先,我们需要一个隐藏的弹出窗口...

    jquery插件(网页右下角弹出窗口)

    **jQuery 插件:网页右下角弹出窗口** 在网页设计中,有时我们需要实现一些交互功能,如向用户展示重要通知、提示信息或者广告,这时网页右下角弹出窗口的功能就显得尤为重要。jQuery 是一个广泛使用的JavaScript库...

    网页右下角弹出窗口(jquery)

    网页右下角弹出窗口是网页交互设计中常见的一种元素,通常用于显示通知、广告或者重要消息。在jQuery这个强大的JavaScript库的帮助下,实现这样的功能变得简单而高效。本篇文章将详细探讨如何使用jQuery来创建网页右...

    右下角弹出窗口实例代码

    在IT行业中,右下角弹出窗口是一种常见的用户体验设计元素,尤其在网页应用和广告展示中。这种设计能够吸引用户的注意力,同时不打断他们的主要浏览体验。本实例代码旨在实现一个兼容IE6+及Firefox浏览器的右下角滑...

    真正屏幕右下角弹出消息窗口

    标题中的“真正屏幕右下角弹出消息窗口”是指一种技术实现,它允许在操作系统桌面的右下角创建一个独立的、不会随主窗口最小化而消失的通知窗口。这种技术通常用于模仿像QQ和MSN这样的即时通讯软件的提醒功能,它们...

    WEB窗口右下角弹出窗口提示效果

    在网页设计中,"WEB窗口右下角弹出窗口提示效果"是一种常见的用户交互手段,用于向用户展示通知、消息或者重要信息。这种效果能够吸引用户的注意力,而不干扰他们当前的操作,因此在现代Web应用中非常流行。下面将...

    js 仿qq右下角弹出窗口

    标题 "js 仿qq右下角弹出窗口" 指的是使用JavaScript编程技术来创建一个功能,模拟QQ软件在用户界面右下角显示通知或消息提示的效果。这种设计常见于许多网页应用,用于提醒用户有新的信息、更新或者活动。下面我们...

    javaScript实现网页右下角弹出窗口(模拟qq消息)代码

    javaScript实现网页右下角弹出窗口(模拟qq消息)代码,js 模拟qq消息 右下角弹窗 html广告插件 js广告插件

    jquery右下角弹出窗口插件

    "jQuery右下角弹出窗口插件"就是这样一个工具,它能够帮助开发者快速地创建出具有动画效果的弹出窗口,无需花费大量时间编写复杂的CSS和JavaScript代码。 **jQuery Messager插件** jQuery Messager是这个插件的...

    好用的jquery类似QQ页面右下角弹出窗口

    标题提到的“好用的jquery类似QQ页面右下角弹出窗口”是指利用jQuery实现的一种模仿QQ聊天窗口从页面右下角弹出的效果。这种效果在网页通知、消息提示等方面非常常见,能够吸引用户的注意力而不会过于打扰他们的浏览...

    BS 浏览器右下角弹出窗口

    标题中的“BS 浏览器右下角弹出窗口”指的是在基于浏览器(Browser)的系统中,特别是在Web开发中,实现的一种特定的用户界面效果。这种效果通常用于通知、提示或者显示一些临时性的信息,它会出现在浏览器窗口的右...

    网页右下角弹出提示框

    网页右下角弹出提示框是一种常见的用户交互设计,它能够有效地吸引用户的注意力,传递重要信息或引导用户进行特定操作。这种设计在许多网站和应用中都有应用,尤其是在电子商务、新闻资讯以及社交媒体平台中尤为常见...

    jquery 右下角弹出窗口 可以放大缩小 关闭的!

    在给定的标题“jquery 右下角弹出窗口 可以放大缩小 关闭的!”中,我们可以理解这是一个利用 jQuery 实现的功能模块,它位于网页的右下角,提供弹出窗口的通知功能,且窗口具有可放大、缩小和关闭的交互特性。这种...

    模仿QQ消息提示右下角弹出窗口提示代码源文件4种不同方式

    "模仿QQ消息提示右下角弹出窗口提示代码源文件4种不同方式"是一个专注于实现这一功能的资源,它提供了多种实现此类通知的技术手段。下面将详细阐述这四种不同的实现方式以及它们在实际应用中的价值。 首先,右下角...

    一个类似QQ的用JavaScript实现的在网页右下角弹出窗口源码例子

    2. **用JavaScript在网页右下角弹出窗口.htm**: 这个例子展示了如何利用JavaScript将一个窗口定位到网页的右下角。主要知识点包括: - CSS布局:理解页面坐标系统,使用绝对定位(position: absolute)将元素放置...

    javascript右下角弹出层

    javascript 右下角弹出层,右下角探出广告窗口的javascript代码

    用JavaScript在网页右下角弹出窗口

    用JavaScript在网页右下角弹出窗口

    js实现右下角窗口弹出窗口效果

    该标签表明本文的主要内容是与网页右下角弹出窗口相关的知识点,包括JavaScript实现右下角窗口弹出窗口效果的技术细节。 部分内容 该部分内容提供了 JavaScript 代码,以实现右下角窗口弹出窗口效果。代码主要包括...

Global site tag (gtag.js) - Google Analytics