html点击按钮弹出悬浮窗_js点击收缩或张开的悬浮窗实例分享

本文主要和大家介绍了js实现可以点击收缩或张开的悬浮窗效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

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

思路

1、在html中定义一个p块，定一个id；一个按钮，点击时用。

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

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

步骤

html

• item one
• item two
• item three
• item four
• item five

+

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{