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实现放大镜效果
Aug 17 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
Mar 25 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
使用socket.io实现简单聊天室案例
Jan 02 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
es5 类与es6中class的区别小结
Nov 09 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之Smarty入门
2007/01/04 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
innerHTML在IE中报错解决方案
2014/12/15 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
Html5+jQuery+CSS制作相册小记录
2016/12/30 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
使用python存储网页上的图片实例
2018/05/22 Python
详解Python 数据库的Connection、Cursor两大对象
2018/06/25 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
Python字典dict常用方法函数实例
2020/11/09 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
学生党员思想汇报范文
2014/01/09 职场文书
大型活动策划方案
2014/01/12 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
mysql数据库隔离级别详解
2022/06/16 MySQL