js实现可以点击收缩或张开的悬浮窗


Posted in Javascript onSeptember 18, 2017

本文实例为大家分享了js实现悬浮窗的具体代码,供大家参考,具体内容如下

js实现可以点击收缩或张开的悬浮窗

说明:点击”+“按钮,悬浮窗收缩/展开

思路

1、在html中定义一个div块,定一个id;一个按钮,点击时用。

2、写一个js,包含收缩以及展开的函数;为按钮添加点击事件。

3、想要让悬浮窗好看点,可设置对应的参数。

步骤

html

<div id="area">
    <div id="small_menu">
      <ul>
        <li><a href="#">item one</a></li>
        <li><a href="#">item two</a></li>              
        <li><a href="#">item three</a></li>
        <li><a href="#">item four</a></li>
        <li><a href="#">item five</a></li>
      </ul>         
    </div>    
    <div id="on" onclick="xuanfu();"><p>+</p></div> 
  </div>

js

var menubox = document.getElementById("area"); //area为菜单栏的id
  var cli_on = document.getElementById("on"); //on为按钮
  var flag = false, timer = null, initime = null, r_len = 0;

  if(menubox.style.right=== 0){
    flag = true;
    }
  else{
    flag = false;
    }
  cli_on.onclick = function () {
    //为on按钮绑定click事件
    clearTimeout(initime);
    //根据状态flag执开展开收缩
    if (flag) {
      r_len = 0;
      timer = setInterval(slideright, 10);
    } else {
      r_len = -160;
      timer = setInterval(slideleft, 10);
    }
  }
  //展开
  function slideright() {
    if (r_len <= -160) {
      clearInterval(timer);
      flag = !flag;
      return false;
    }else{
      r_len -= 5;
      menubox.style.right = r_len + 'px';
    }
  }
  //收缩
  function slideleft() {
    if (r_len >= 0) {
      clearInterval(timer);
      flag = !flag;
      return false;
    } else {
      r_len += 5;
      menubox.style.right = r_len + 'px';
    }
  }

完整代码

含css,可直接用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>悬浮窗</title>
</head>
<style type="text/css">
#area{
 position:fixed;
 width:160px;
 right:-160px;
 top:27%;}
#small_menu ul {
 list-style: none;
}
#area #on{
 position: absolute;
 top: 40%;
 right: 100%;
 width: 30px;
 height: 30px;
 cursor: pointer;
 border-radius: 15px;
 background-color: rgba(13, 143, 143, 0.2);
 }
#area #on p{
 font-size:30px;
 text-align:center;
 margin-top:-6px;
 color:#01E290;
 }
#area #small_menu {
 width:100%;
 } 
#area #small_menu ul li {
 width:100%;
 height: 44px;
 text-align:left;
 background-color: rgba(2, 27, 38, 0.62);
 border-top: 1px solid #043B46;
 line-height: 44px;
}
#area #small_menu ul li a{
 text-decoration: none; 
 margin-left:30px;
 color: #bfbfbf;
 font-size:16px;
 font-family: 'Microsoft Yahei';
 }
#area #small_menu li.active {
 width: 156px; 
 background-color: rgba(2, 27, 38, 0.87);
 border-left: 4px solid #00ffff;
 border-top: 0px;
}
#area #small_menu li.active a{
 color: #00ffff;
 }

#area #small_menu ul li:hover {
 width: 156px;
 background-color: rgba(2, 27, 38, 0.87);
 border-left: 4px solid #00ffff;

}
#area #small_menu ul li:hover a{
 color: #00ffff; 
 } 
</style>
<body>
 <div id="area">
  <div id="small_menu">
   <ul>
    <li><a href="#">item one</a></li>
    <li><a href="#">item two</a></li>       
    <li><a href="#">item three</a></li>
    <li><a href="#">item four</a></li>
    <li><a href="#">item five</a></li>
   </ul>     
  </div>  
  <div id="on" onclick="xuanfu();"><p>+</p></div> 
 </div>
<script>
//嵌套在页面中,文档初始化时加载。

 var menubox = document.getElementById("area"); //area为菜单栏的id
 var cli_on = document.getElementById("on"); //on为按钮
 var flag = false, timer = null, initime = null, r_len = 0;

 if(menubox.style.right=== 0){
  flag = true;
  }
 else{
  flag = false;
  }
 cli_on.onclick = function () {
  //为on按钮绑定click事件
  clearTimeout(initime);
  //根据状态flag执开展开收缩
  if (flag) {
   r_len = 0;
   timer = setInterval(slideright, 10);
  } else {
   r_len = -160;
   timer = setInterval(slideleft, 10);
  }
 }
 //展开
 function slideright() {
  if (r_len <= -160) {
   clearInterval(timer);
   flag = !flag;
   return false;
  }else{
   r_len -= 5;
   menubox.style.right = r_len + 'px';
  }
 }
 //收缩
 function slideleft() {
  if (r_len >= 0) {
   clearInterval(timer);
   flag = !flag;
   return false;
  } else {
   r_len += 5;
   menubox.style.right = r_len + 'px';
  }
 } 

</script>
</body>

</html>

小结到此。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery获取元素索引值index()示例
Feb 13 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
解析js如何获取css样式
Dec 11 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
javascript对HTML字符转义与反转义
Dec 13 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
javascript流程控制语句集合
Sep 18 #Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 #Javascript
Angular中的$watch方法详解
Sep 18 #Javascript
jQuery实现的表格前端排序功能示例
Sep 18 #jQuery
node.js中使用Export和Import的方法
Sep 18 #Javascript
inner join 内联与left join 左联的实例代码
Sep 18 #Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
Sep 18 #Javascript
You might like
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
YII中assets的使用示例
2014/07/31 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
php自定义apk安装包实例
2014/10/20 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
Python 流程控制实例代码
2009/09/25 Python
Python实现的简单发送邮件脚本分享
2014/11/07 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
python使用requests.session模拟登录
2019/08/09 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
数字漫画:comiXology
2020/06/13 全球购物
实习生自我鉴定
2013/12/12 职场文书
体育教师自荐信范文
2013/12/16 职场文书
会计岗位职责
2015/02/03 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS