JS實(shí)現(xiàn)固定在右下角可展開收縮DIV層的方法

更新時(shí)間：2015年02月13日 12:17:39 作者：代碼家園

這篇文章主要介紹了JS實(shí)現(xiàn)固定在右下角可展開收縮DIV層的方法,右下角的div層可實(shí)現(xiàn)收縮與展開的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)固定在右下角可展開收縮DIV層的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!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實(shí)現(xiàn)固定在右下角可展開收縮的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">

僅實(shí)現(xiàn)核心部分，至于內(nèi)容自己完善，或者繼續(xù)美化一下，應(yīng)該不錯(cuò)！

  <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()">關(guān)閉</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主要是為了顯示的比較好，因?yàn)槲以O(shè)置了邊框*/

         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"

         /*隔一段時(shí)間執(zhí)行這個(gè)函數(shù)*/

         setTimeout("runright()",30)

         }

      /*關(guān)閉:設(shè)置高度一直減*/

      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>