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 02 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
JSONP之我见
Mar 24 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
JS实现图片垂直居中显示小结
Dec 13 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
AngularJS动态生成select下拉框的方法实例
Nov 17 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
PHP下利用header()函数设置浏览器缓存的代码
2010/09/01 PHP
浅析PHP Socket技术
2013/08/02 PHP
php随机显示图片的简单示例
2014/02/15 PHP
PHP的变量类型和作用域详解
2014/03/12 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
List Installed Software Features
2007/06/11 Javascript
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
Mootools 1.2教程 设置和获取样式表属性
2009/09/15 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
Svg.js实例教程及使用手册详解(一)
2016/05/16 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
CSS3中的Media Queries学习笔记
2016/05/23 HTML / CSS
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
国培计划培训感言
2014/03/11 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
C++程序员求职信
2014/05/07 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
领导欢迎词致辞
2015/01/23 职场文书
护士先进个人总结
2015/02/13 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python