本文實例為大家分享了js實現(xiàn)懸浮窗的具體代碼，供大家參考，具體內(nèi)容如下
站在用戶的角度思考問題，與客戶深入溝通，找到鞍山網(wǎng)站設(shè)計與鞍山網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、空間域名、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋鞍山地區(qū)。
說明：點擊”+“按鈕，懸浮窗收縮/展開
思路
1、在html中定義一個div塊，定一個id；一個按鈕，點擊時用。
2、寫一個js,包含收縮以及展開的函數(shù)；為按鈕添加點擊事件。
3、想要讓懸浮窗好看點，可設(shè)置對應的參數(shù)。
步驟
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);
//根據(jù)狀態(tài)flag執(zhí)開展開收縮
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,可直接用
懸浮窗 +
小結(jié)到此。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
