欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-08 13:11:34
本文实例为大家分享了js实现悬浮窗的具体代码,供大家参考,具体内容如下 说明:点击”+“按钮,悬浮窗收缩/展开 思路 1、在html中定义一个div块,定一个id...

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

小结到此。

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