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


Posted in Javascript onFebruary 13, 2015

本文实例讲述了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 相关文章推荐
翻译整理的jQuery使用查询手册
Mar 07 Javascript
JS鼠标滑过图片时切换图片实现思路
Sep 12 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
JavaScript数组_动力节点Java学院整理
Jun 26 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
JavaScript快速调试的两个技巧
Nov 04 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 #Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 #Javascript
AngularJS表单编辑提交功能实例
Feb 13 #Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 #Javascript
jQuery动态修改超链接地址的方法
Feb 13 #Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 #Javascript
javascript获取元素离文档各边距离的方法
Feb 13 #Javascript
You might like
PHP中文件上传的一个问题
2010/09/04 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
将string解析为json的几种方式小结
2010/11/11 Javascript
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
JS中typeof与instanceof之间的区别总结
2013/11/14 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
Bootstrap源码解读下拉菜单(4)
2016/12/23 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
2019/10/29 Javascript
python基础教程之自定义函数介绍
2014/08/29 Python
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
详解Python中的type和object
2018/08/15 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
virtualenv介绍及简明教程
2020/06/23 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
学校宣传标语
2014/06/18 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
小学生学习保证书
2015/02/26 职场文书
运动会致辞稿
2015/07/29 职场文书
事业单位岗位说明书
2015/10/08 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
详解Python常用的魔法方法
2021/06/03 Python
动画电影《擅长捉弄人的高木同学》6月10日上映!
2022/03/20 日漫