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 相关文章推荐
爱恋千雪-US-AscII加密解密工具(网页加密)下载
Jun 06 Javascript
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
为开发者准备的10款最好的jQuery日历插件
Feb 04 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
jQuery学习笔记之jQuery中的$
Jan 19 Javascript
javascript数组去重方法分析
Dec 15 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
小程序实现日历左右滑动效果
Oct 21 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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连接函数implode与分割explode的深入解析
2013/06/26 PHP
php简单实现MVC
2015/02/05 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
新手入门常用代码集锦
2007/01/11 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
2014/01/10 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
2016/01/28 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
jQuery实现table表格信息的展开和缩小功能示例
2018/07/21 jQuery
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
Python subprocess模块常见用法分析
2018/06/12 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
python对指定字符串逆序的6种方法(小结)
2020/04/02 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
python如何删除列为空的行
2020/07/17 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
深入解析HTML5中的Blob对象的使用
2015/09/08 HTML / CSS
大学生个人简历自我评价
2013/11/16 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
主题班会演讲稿
2014/05/22 职场文书
伦敦奥运会口号
2014/06/13 职场文书
外贸业务员求职信
2014/06/16 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
Java异常处理try catch的基本用法
2021/12/06 Java/Android
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫
浅谈Redis的事件驱动模型
2022/05/30 Redis