本文实例为大家分享了js实现悬浮窗的具体代码,供大家参考,具体内容如下
说明:点击“+”按钮,悬浮窗收缩/展开
<>强思路
1,在html中定义一个div块,定一个id,一个按钮,点击时用。
2,写一个js,包含收缩以及展开的函数;为按钮添加点击事件。
3,想要让悬浮窗好看点,可设置对应的参数。
<强>步骤
html
& lt; div id=扒颉北?
& lt; div id=皊mall_menu”比;
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞item>项目two & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞项three & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞项four & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞项five & lt;/li>
& lt;/ul>
& lt;/div>
& lt; div id="上"祝辞& lt; p> + & lt;/p> & lt;/div>
& lt;/div>
js
var menubox=. getelementbyid(“区域”);//区域为菜单栏的id
var cli_on=. getelementbyid (“”);//为按钮
var国旗=false,计时器=null, initime=null, r_len=0;
如果(menubox.style。对===0){
国旗=true;
}
其他{
国旗=false;
}
cli_on。onclick=function () {//为按钮绑定点击事件
clearTimeout (initime);//根据状态国旗执开展开收缩
如果(国旗){
r_len=0;
计时器=setInterval (slideright 10);
其他}{
r_len=-160;
计时器=setInterval (slideleft 10);
}
}//展开
函数slideright () {
如果(r_len & lt;=-160) {
clearInterval(计时器);
国旗=!国旗;
返回错误;
其他}{
r_len -=5;
menubox.style。正确的=r_len +“px”;
}
}//收缩
函数slideleft () {
如果(r_len祝辞=0){
clearInterval(计时器);
国旗=!国旗;
返回错误;
其他}{
r_len +=5;
menubox.style。正确的=r_len +“px”;
}
}
之前
完整代码
含css,可直接用
& lt; !DOCTYPE html公共”——//W3C XHTML 1.0//DTD过渡//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”的在
& lt; html xmlns=" http://www.w3.org/1999/xhtml "比;
& lt; head>
& lt;元http-equiv=? type”内容=" text/html;utf - 8字符集="/比;
& lt; title>悬浮窗& lt;/title>
& lt;/head>
& lt;风格类型=" text/css "比;
#{区域
位置:固定;
宽度:160 px;
右:-160 px;
上图:27%;}
# small_menu ul {
list-style:没有;
}
在{# #领域
位置:绝对的;
上图:40%;
右:100%;
宽度:30 px;
高度:30 px;
光标:指针;
border - radius: 15 px;
background - color: rgba (13、143、143、0.2);
}
在p{# #领域
字体大小:30 px;
text-align:中心;
margin-top: 6 px;
颜色:# 01 e290;
}
#区域# small_menu {
宽度:100%;
}
李#区域# small_menu ul {
宽度:100%;
高度:44 px;
text-align:左;
background - color: rgba(38 2, 27日,0.62);
border-top: 1 px固体# 043 b46;
行高:44 px;
}
#区李# small_menu ul {
文字修饰:没有;
margin-left: 30 px;
颜色:# bfbfbf;
字体大小:16 px;
字体类型:“微软Yahei”;
}
# # small_menu李。活跃的{
宽度:156 px;
background - color: rgba(38 2, 27日,0.87);
border-left: 4 px固体# 00飞行符;
border-top: 0 px;
}
# # small_menu李。活跃的一个{
颜色:# 00飞行符;
}
#区域# small_menu ul李:{徘徊
宽度:156 px;
background - color: rgba(38 2, 27日,0.87);
border-left: 4 px固体# 00飞行符;
}
#区域# small_menu ul李:徘徊一个{
颜色:# 00飞行符;
}
& lt;/style>
& lt; body>
& lt; div id=扒颉北?
& lt; div id=皊mall_menu”比;
& lt; ul>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞item>项目two & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞项three & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞项four & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞项five
