脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS实现固定在右下角可展开收缩DIV层

JS实现固定在右下角可展开收缩DIV层的方法

 更新时间：2015年02月13日 12:17:39   作者：代码家园  
这篇文章主要介绍了JS实现固定在右下角可展开收缩DIV层的方法,右下角的div层可实现收缩与展开的功能,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了JS实现固定在右下角可展开收缩DIV层的方法。分享给大家供大家参考。具体实现方法如下：

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS实现固定在右下角可展开收缩的DIV层</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
body{text-align:center;}
#main{border:red 1px solid;width:1000px;height:1600px;margin:0 auto;}
#main #scroll{width:250px;height:150px;border:green 1px solid;text-align:left;position:absolute;visibility:hidden;}
#main #scroll #open{float:left;text-align:center;width:180px;}
#main #scroll #close{float:right;}
//-->
</style>
</head>
<body>
<div id="main">
仅实现核心部分，至于内容自己完善，或者继续美化一下，应该不错！
  <div id="scroll"><div id="open" onmouseover="openbox()"><a href="/" onclick="openbox()">欢迎光临</a><div id="close" class="zzsky"><marquee align="left" onmouseover="stop()" onmouseout="start()">欢迎提出宝贵建议！</marquee></div></div>
  <div id="close"><a href="#" onclick="closebox()">关闭</a>                 
<script type="text/javascript">
     <!--
       var scroll=document.getElementById("scroll")
       var main=document.getElementById("main")
       var open=document.getElementById("open")
       var close=document.getElementById("close")
       scroll.style.visibility="visible"
      function runright()
       {
         /*这里-4主要是为了显示的比较好，因为我设置了边框*/
         scroll.style.top=document.body.scrollTop+document.body.clientHeight-scroll.clientHeight-4+"px"
         scroll.style.left=document.body.scrollLeft+document.body.clientWidth-scroll.clientWidth-4+"px"
         /*隔一段时间执行这个函数*/
         setTimeout("runright()",30)
         }
      /*关闭:设置高度一直减*/
      function closebox()
      {
        scroll.style.height=scroll.offsetHeight-4+"px"
        if (scroll.offsetHeight>20)
         {
        setTimeout("closebox()",5)
         }
        else
         {
            close.style.visibility="hidden"
         }
      }
      function openbox()
      {
        if (scroll.offsetHeight<148)
         {
            close.style.visibility="visible"
        scroll.style.height=scroll.offsetHeight+2+"px"
        setTimeout("openbox()",5)
         }
      }
      runright();
     //-->
</script>
  </div>
</div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • javascript中String对象的slice()方法分析

    javascript中String对象的slice()方法分析

    这篇文章主要介绍了javascript中String对象的slice()方法,以实例形式分析了slice()方法的定义、参数与具体用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 一个关于JS正则匹配的踩坑记录

    一个关于JS正则匹配的踩坑记录

    这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • JavaScript对象拷贝与赋值操作实例分析

    JavaScript对象拷贝与赋值操作实例分析

    这篇文章主要介绍了JavaScript对象拷贝与赋值操作,结合实例形式分析了javascript对象定义、拷贝、赋值等相关操作技巧与注意事项,需要的朋友可以参考下
    2018-12-12
  • 微信小程序跨页面传递data数据方法解析

    微信小程序跨页面传递data数据方法解析

    这篇文章主要介绍了微信小程序跨页面传递data数据方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-12-12
  • JavaScript控制网页平滑滚动到指定元素位置的方法

    JavaScript控制网页平滑滚动到指定元素位置的方法

    这篇文章主要介绍了JavaScript控制网页平滑滚动到指定元素位置的方法,实例分析了javascript操作页面滚动的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JS上传图片预览插件制作（兼容到IE6）

    JS上传图片预览插件制作（兼容到IE6）

    这篇文章主要介绍了JS上传图片预览插件制作（兼容到IE6）的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08
  • JS实现队列与堆栈的方法

    JS实现队列与堆栈的方法

    这篇文章主要介绍了JS实现队列与堆栈的方法,结合实例形式分析了JavaScript实现队列与堆栈的原理与相关实现技巧,需要的朋友可以参考下
    2016-04-04
  • JavaScript中的原型和继承详解(图文)

    JavaScript中的原型和继承详解(图文)

    到现在，我们就有讨论 JavaScript 中的原型和继承问题的基础了。它虽然并不像你在 C++、Java 或 C# 中了解的经典继承模式一样，但这种方式同样强大，并且有可能会更加灵活
    2014-07-07
  • 始终在屏幕中间显示Div的代码(css+js)

    始终在屏幕中间显示Div的代码(css+js)

    如何始终在屏幕中间显示Div需要的朋友可以参考下。
    2011-03-03
  • location对象的属性和方法应用(解析URL)

    location对象的属性和方法应用(解析URL)

    本文将与大家分享下location对象使用属性和方法来解析URL的实例，感兴趣的朋友可以参考下，希望对你有所帮助
    2013-04-04

最新评论