达州做网站
大橙子网站建设，新征程启航
为企业提供网站建设、域名注册、服务器等服务
js实现可以点击收缩或张开的悬浮窗
本文实例为大家分享了js实现悬浮窗的具体代码，供大家参考，具体内容如下
站在用户的角度思考问题，与客户深入沟通，找到鞍山网站设计与鞍山网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：网站设计制作、网站设计、企业官网、英文网站、手机端网站、网站推广、空间域名、虚拟空间、企业邮箱。业务覆盖鞍山地区。
说明：点击”+“按钮，悬浮窗收缩/展开
思路
1、在html中定义一个div块，定一个id；一个按钮，点击时用。
2、写一个js,包含收缩以及展开的函数；为按钮添加点击事件。
3、想要让悬浮窗好看点，可设置对应的参数。
步骤
html
+
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,可直接用
悬浮窗 +
小结到此。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
网站标题：js实现可以点击收缩或张开的悬浮窗
URL分享：http://dzwzjz.com/article/ijepee.html