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 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
原生JS实现九宫格抽奖
Sep 13 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
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
PHP6新特性分析
2016/03/03 PHP
浅谈PHP面向对象之访问者模式+组合模式
2017/05/22 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
javascript函数库-集合框架
2007/04/27 Javascript
JavaScript原型继承之基础机制分析
2011/08/26 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
jQuery zclip插件实现跨浏览器复制功能
2015/11/02 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
SVG描边动画
2017/02/23 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
React Router v4 入坑指南(小结)
2018/04/08 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
python strip() 函数和 split() 函数的详解及实例
2017/02/03 Python
Python3.X 线程中信号量的使用方法示例
2017/07/24 Python
python解决字符串倒序输出的问题
2018/06/25 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
python删除某个目录文件夹的方法
2020/05/26 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
Python通过format函数格式化显示值
2020/10/17 Python
Agoda香港:全球特价酒店预订
2017/05/07 全球购物
说说在weblogic中开发消息Bean时的persistent与non-persisten的差别
2013/04/07 面试题
国际贸易专业求职信
2014/06/04 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书