编程 Javascript

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程序设计有所帮助。

- Author -

代码家园

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 面向对象,实现namespace,class,继承，重载

Oct 29 Javascript

jQuery基础知识小结

Dec 22 Javascript

jQuery实现新消息闪烁标题提示的方法

Mar 11 Javascript

JavaScript获取当前日期是星期几的方法

Apr 06 Javascript

基于JavaScript操作DOM常用的API小结

Dec 01 Javascript

Bootstrap布局方式详解

May 27 Javascript

关于JS中setTimeout()无法调用带参函数问题的解决方法

Jun 21 Javascript

说说AngularJS中的$parse和$eval的用法

Sep 14 Javascript

Vue Router的懒加载路径的解决方法

Jun 21 Javascript

jquery ajax加载数据前台渲染方式不用for遍历的方法

Aug 09 jQuery

JQuery模拟实现网页中自定义鼠标右键菜单功能

Nov 14 jQuery

Vue Render函数创建DOM节点代码实例

Jul 08 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 计算两个时间戳相隔的时间的函数(小时)

2009/12/18 PHP

php中magic_quotes_gpc对unserialize的影响分析

2014/12/16 PHP

PHP实现通过正则表达式替换回调的内容标签

2015/06/15 PHP

Yii遍历行下每列数据的方法

2016/10/17 PHP

js 判断脚本加载完毕的代码

2011/07/13 Javascript

JavaScript 原型继承之构造函数继承

2011/08/26 Javascript

最佳6款用于移动网站开发的jQuery 图片滑块插件小结

2012/07/20 Javascript

js实现适用于素材网站的黑色多级菜单导航条效果

2015/08/24 Javascript

bootstrap-treeview自定义双击事件实现方法

2016/01/09 Javascript

Bootstrap每天必学之级联下拉菜单

2016/03/27 Javascript

探讨AngularJs中ui.route的简单应用

2016/11/16 Javascript

微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

2016/11/25 Javascript

关于foreach循环中遇到的问题小结

2017/05/08 Javascript

Angular4 中内置指令的基本用法

2017/07/31 Javascript

jQuery实现的两种简单弹窗效果示例

2018/04/18 jQuery

Python中replace方法实例分析

2014/08/20 Python

决策树的python实现方法

2014/11/18 Python

Python转换HTML到Text纯文本的方法

2015/01/15 Python

详细介绍Python函数中的默认参数

2015/03/30 Python

Python的网络编程库Gevent的安装及使用技巧

2016/06/24 Python

Python爬虫实现爬取京东手机页面的图片(实例代码)

2017/11/30 Python

将字典转换为DataFrame并进行频次统计的方法

2018/04/08 Python

python提取照片坐标信息的实例代码

2019/08/14 Python

Python3从零开始搭建一个语音对话机器人的实现

2019/08/23 Python

你还在@微信官方？聊聊Python生成你想要的微信头像

2019/09/25 Python

Tensorflow分批量读取数据教程

2020/02/07 Python

Pytorch中.new()的作用详解

2020/02/18 Python

Python3.9又更新了:dict内置新功能

2020/02/28 Python

Python爬虫requests库多种用法实例

2020/05/28 Python

Django实现后台上传并显示图片功能

2020/05/29 Python

使用opencv识别图像红色区域,并输出红色区域中心点坐标

2020/06/02 Python

python中altair可视化库实例用法

2021/01/26 Python

俄罗斯第一家篮球店：StreetBall

2020/07/30 全球购物

舞蹈兴趣小组活动总结

2014/07/07 职场文书

政协调研汇报材料

2014/08/15 职场文书

单位实习鉴定评语

2015/01/04 职场文书