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

发布时间:2020-10-11 20:23:21 作者:Jimmy1996
来源:脚本之家 阅读:838

本文实例为大家分享了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>

小结到此。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。

推荐阅读:
  1. 点击UITableView的cell展开收缩
  2. 如何让ExpandableListView点击不收缩

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js 悬浮窗

上一篇:MUI  Scroll插件的使用详解

下一篇:Python设置在shell脚本中自动补全功能的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》