右下角弹窗带缩小、关闭和还原功能【转载】

最新推荐文章于 2023-10-11 19:04:12 发布
最新推荐文章于 2023-10-11 19:04:12 发布
阅读量583 收藏
点赞数
文章标签： function border class table 脚本 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xialiluo/article/details/6239214
版权

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 可最小化和关闭的右下角浮动窗口 站长特效网</title>
<style type="text/css">
<!--
#ww_zzjs_net {border:#0066FF 1px solid;}
#zzjs_net {border:#0066FF 1px solid;}
.www_zzjs_net_head {color: #FFFFFF; font-size:13px; background-color:#5e7aa6; height:25px; padding:0,5,0,5;}
#www_zzjs_net {background-color:#FFFFFF; border:#0066FF 1px solid; border-left-style:none; border-right-style:none;}
-->
</style>
<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()
 {//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
  try
  {
   divTop = parseInt(document.getElementById("ww_zzjs_net").style.top,10);
   divLeft = parseInt(document.getElementById("ww_zzjs_net").style.left,10);
   divHeight = parseInt(document.getElementById("ww_zzjs_net").offsetHeight,10);
   divWidth = parseInt(document.getElementById("ww_zzjs_net").offsetWidth,10);
   docWidth = document.body.clientWidth;
   docHeight = document.body.clientHeight;
   document.getElementById("ww_zzjs_net").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10; //divHeight
   document.getElementById("ww_zzjs_net").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth;
   document.getElementById("ww_zzjs_net").style.visibility="visible";
   objTimer = window.setInterval("moveDiv()",10);
  }
  catch(e){}
 }//欢d迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 //初始化位置
 function resizeDiv()
 {
  i+=1;
  //if(i>300) closeDiv() //想不用自动消失由用户来自己关闭所以屏蔽这句
  try
  {
   divHeight = parseInt(document.getElementById("ww_zzjs_net").offsetHeight,10);
   divWidth = parseInt(document.getElementById("ww_zzjs_net").offsetWidth,10);
   docWidth = document.body.clientWidth;
   docHeight = document.body.clientHeight;
   document.getElementById("ww_zzjs_net").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
   document.getElementById("ww_zzjs_net").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
  }
  catch(e){}
 }//欢迎来到站长特效网，c我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 //最小化
 function minsizeDiv()
 {
  i+=1
  //if(i>300) closeDiv() //想不用自动消失由用户来自己关闭所以屏蔽这句
  try
  {
   divHeight = parseInt(document.getElementById("zzjs_net").offsetHeight,10);
   divWidth = parseInt(document.getElementById("zzjs_net").offsetWidth,10);
   docWidth = document.body.clientWidth;
   docHeight = document.body.clientHeight;
   document.getElementById("zzjs_net").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10);
   document.getElementById("zzjs_net").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10);
  }
  catch(e){}
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长c，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 //移动
 function moveDiv()
 {
 try
 {
  if(parseInt(document.getElementById("ww_zzjs_net").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))
  {
   window.clearInterval(objTimer);
   objTimer = window.setInterval("resizeDiv()",1);
  }
  divTop = parseInt(document.getElementById("ww_zzjs_net").style.top,10);
  document.getElementById("ww_zzjs_net").style.top = divTop -1;
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，h本站收集大量高质量js代码，还有许多广告代码下载。
  catch(e){}
 }
 function minDiv()
 {
  closeDiv();
  document.getElementById('zzjs_net').style.visibility='visible';
  objTimer = window.setInterval("minsizeDiv()",1);
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载c。
 function maxDiv()
 {
  document.getElementById('zzjs_net').style.visibility='hidden';
  document.getElementById('ww_zzjs_net').style.visibility='visible';
  objTimer = window.setInterval("resizeDiv()",1);
  //resizeDiv()
  getMsg();
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站q收集大量高质量js代码，还有许多广告代码下载。
 function closeDiv()
 {
  document.getElementById('ww_zzjs_net').style.visibility='hidden';
  document.getElementById('zzjs_net').style.visibility='hidden';
  if(objTimer) window.clearInterval(objTimer);
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，e本站收集大量高质量js代码，还有许多广告代码下载。
 -->
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>
<!--欢迎来到站长特效网，我们网站收集大量高质量js特效，提供许多广告代码下载，网址：www.zzjs.net，zzjs@msn.com,用.net打造靓站-->
<div id="ww_zzjs_net" style="z-index:99999;left:0px;visibility:hidden;width:200px;position:absolute;top:0px;height:30px;">
  <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="www_zzjs_net_head"><span style="cursor:hand;font-size:12px;font-weight:bold;margin-right:4px;" title="最小化" οnclick="minDiv()">站长特效网</span></td>
            <td width="26" class="www_zzjs_net_head"> </td>
            <td align="right" class="www_zzjs_net_head"><span style="cursor:hand;font-size:12px;font-weight:bold;margin-right:4px;" title="最小化" οnclick="minDiv()">-</span> <span style="cursor:hand;font-size:12px;font-weight:bold;margin-right:4px;" title="关闭" οnclick="closeDiv()">×</span></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td height="30" align="center" valign="middle" colSpan="3">
        <div id="www_zzjs_net">
          <table width="100%" height="100%" cellpadding="0" cellspacing="0">
           <tr>
             <td align="left" height="100%" style="font-size:14px;padding:3px;"><div><p align="center">您已登陆，<a href="http://www.zzjs.net">退出</a>！<br><a href="my.asp" title="站长特效网,www.zzjs.net，欢迎您的到来。">查看我的信息</a></div>
             </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
</div>
<!--最小化状态-->
<div id="zzjs_net" style="z-index:99999;left:0px;visibility:hidden;width:200px;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="www_zzjs_net_head"><span title="还原" style="cursor:hand;font-size:12px;font-weight:bold;margin-right:4px;" οnclick="maxDiv()">展开图层</span></td>
            <td width="26" class="www_zzjs_net_head"> </td>
            <td align="right" class="www_zzjs_net_head"><span title="还原" style="cursor:hand;font-size:12px;font-weight:bold;margin-right:4px;" οnclick="maxDiv()">□</span><span title="关闭" style="cursor:hand;font-size:12px;font-weight:bold;margin-right:4px;" οnclick="closeDiv()">×</span></td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

离洛
关注
统信系统UOS桌面版V20 用户手册
Reyn_观极
07-27 1万+
UOS桌面版V20用户手册。
js 超简单右下角可收缩弹窗
09-22
非常的简单，就几行代码实现右下角弹广告或其它提示信息窗体。
JS 弹窗到右下角
weixin_34055787的博客
01-29 113
&lt;div id="msg_win" style="display: block; top: 490px; visibility: visible; opacity: 1;"&gt; &lt;div class="icos"&gt;&lt;a id="msg_min" title="" href="javascript:vo
js右下角弹出可以缩小的框(div),兼容IE,FF
weixin_34417635的博客
02-20 148
为什么80%的码农都做不了架构师？>>> ...
《小白H5成长之路28》用CSS3和jQuery实现简单的右下角弹窗
老炉传说的专栏
12-21 168
“小白，我们接着说CSS3动画的事情吧！今天上午你了解了一下关键帧keyframes，已经可以实现一些打开页面后自动执行的动画效果，现在我们试试通过jQuery动态给容器添加CSS3动画。”“为什么要动态添加呢？”“有时我们并不希望打开页面就执行一个动画，而是希望通过用户的点击或者鼠标移到某个元素上再触发对应的CSS3动画。你有没有发现，现在很多网站的图片鼠标移上去图片会稍微变大一点，鼠标...
右侧div点击收缩展开jquery代码实现
草根
10-23 2639
&lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;浏览器右侧内容点击收缩展开实现&lt;/title&gt; &lt;script type="tex
利用vue和element-ui ，实现需求弹窗右上角关闭按钮左面新增一个减号缩小按钮，把弹窗缩小到只有一个放大按钮和一个关闭按钮的div，div的功能有三个：1div可以拖拽，2放大按钮可以还原弹窗大小，关闭按钮是把弹窗关闭。请用具体代码来实现
06-02
同时，我们还为弹窗容器添加了 `isDragging`、`mouseX`、`mouseY`、`dialogWidth`、`dialogHeight`、`isMinimized` 和 `savedDialogStyle` 等多个状态，用于支持拖拽和缩小弹窗的功能。 在 `minimize` 方法中，我们...
js 弹窗控制，实现可拖拽，设置大小
小飞侠V3
05-29 4003
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 窗口拖拽（改变大小/最小化/最大化/还原/关闭）     #drag {         position: absolute;         top: 100px;         left: 100px;         width: 30
jquery实现div可移动窗口、拖动改变窗口大小、最大化\还原、窗口置顶
qq_37048654的博客
01-26 1622
jquery实现div可移动窗口、拖动改变窗口大小、最大化\还原图例实现 图例 1、拖动标题来移动窗口（红框方案）: 2、最大化: 点击后最大化按钮变成还原按钮，可以还原窗口。 3、关闭 4、拖动改变窗口大小： 该10*10区域可拖动改变窗口大小。 实现 只需将引入的jquery路径修改即可使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title
QMUI UI库 控件 弹窗 列表 工具类 MD
weixin_34109408的博客
04-11 2137
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina.com QMUI UI库 控件 弹窗 列表 工具类 目录 目录简介使用步骤基本组成弹窗相关组件列表相关顶部栏相关TextView相...
原生js div网页右下角浮动提示层可缩小和关闭浮动提示层
11-10
原生js div网页右下角浮动提示层可缩小和关闭浮动提示层
html5点击弹出自动关闭消息提示框
11-24
html5点击弹出自动关闭消息提示框
移动端、uniapp自定义可拖拽大小弹窗 可拖拽弹窗高度可变化弹窗
FANSILVLV的博客
05-01 1210
移动端、uniapp自定义可拖拽大小弹窗 可拖拽弹窗高度可变化弹窗
弹框缩小关闭与打开
zxl_start的博客
05-17 200
弹框缩小关闭与打开 ## 1.弹框缩小功能组建封装 <template> <div class="SmallDialog" v-show="tagList.length"> <div v-for="(item, index) in tagList" :key="item.name" class="item" @click="openDialog(item, index)"> <span class="iconfont icon-chuangk
记录一次前端弹窗随窗口缩放位置跑偏问题处理
qq_41615095的博客
11-17 893
弹窗位置固定缩放问题处理
点击弹窗页面右侧缩小问题
最新发布
前端程序媛_Ying博客
10-11 201
主页面是由header和下面的tabel，2个组件构成，需要在css里使用flex布局， 就解决了弹窗导致的页面右侧缩小问题。
popwindow实现下拉菜单弹出和收缩效果
duanyu218的专栏
02-01 4158
别的不多说先上图吧 以前做这样的功能，我都是自定义一个LinerLayout,然后控制它的隐藏和显示，还需要添加弹出和隐藏的动画效果。另外还需要处理点击空白处和返回该键下拉菜单自动关闭。今天在eoe上无意看到popwindow也能实现这样的功能，而且根本不需要处理动画效果和空白处、返回键点击自动关闭的功能。哎，看来我真的out了，直接上代码： 这里是自定义的PopMen
弹出框移动、放大、缩小、最大化处理
每天多一点干货
07-26 4698
function getViewportSize() { //可视区域的宽度和高度 return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }; } class LayerMove { /...
通过CSS3使图片从左上角移动到右下角
Mr_Yan的博客
04-24 9811
去网上着了好久都没找到，后来想到了cacl计算属性才解决 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, ini
Java实现桌面右下角QQ消息样式弹窗
Java实现桌面右下角弹窗效果主要是通过Swing组件和布局管理器构建弹窗界面，结合鼠标事件监听和系统API来完成特定功能，如定位、显示和交互。这样的弹窗不仅提供了消息通知，还可以根据需求扩展成带有更多交互功能的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值