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 相关文章推荐
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
Nov 27 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
web.js.字符串与正则表达式操作
May 13 Javascript
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
Vue 组件间的样式冲突污染
Aug 31 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
ES6 Object属性新的写法实例小结
Jun 25 Javascript
vue 地区选择器v-distpicker的常用功能
Jul 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
我的论坛源代码(七)
2006/10/09 PHP
加速XP搜索功能堪比vista
2007/03/22 PHP
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
十个优秀的Ajax/Javascript实例网站收集
2010/03/31 Javascript
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
2015/06/26 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
angular2倒计时组件使用详解
2017/01/12 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
详解如何实现一个简单的Node.js脚手架
2017/12/04 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
jQuery实现增删改查
2020/12/22 jQuery
Python实时获取cmd的输出
2015/12/13 Python
Golang与python线程详解及简单实例
2017/04/27 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
Python代码需要缩进吗
2020/07/01 Python
保安员岗位职责
2013/11/17 职场文书
大学生学业生涯规划
2014/01/05 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
小学数学教研活动总结
2014/07/01 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
2014年学校团委工作总结
2014/12/20 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
英语投诉信范文
2015/07/03 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
mysql自增长id用完了该怎么办
2022/02/12 MySQL
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers