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 相关文章推荐
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
Dec 31 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
JQueryDOM之样式操作
Mar 27 jQuery
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
JavaScript实现打字游戏
Feb 19 Javascript
JavaScript 防篡改对象的用法示例
Apr 24 Javascript
解决vue中provide inject的响应式监听
Apr 19 Vue.js
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版(5)
2006/10/09 PHP
php session 错误
2009/05/21 PHP
深入apache host的配置详解
2013/06/09 PHP
php中hashtable实现示例分享
2014/02/13 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
php实现Mongodb自定义方式生成自增ID的方法
2015/03/23 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
PHP自定义多进制的方法
2016/11/03 PHP
php中strtotime函数性能分析
2016/11/20 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
基于Vue过渡状态实例讲解
2017/09/14 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
代码分析Python地图坐标转换
2018/02/08 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
英国最大最好的无人机商店:Drones Direct
2019/07/12 全球购物
离职保密承诺书
2014/05/28 职场文书
材料化学专业求职信
2014/07/15 职场文书
2014报到证办理个人委托书
2014/10/08 职场文书
十八大宣传标语
2014/10/09 职场文书
Python IO文件管理的具体使用
2022/03/20 Python