js實現(xiàn)懸浮窗效果(支持拖動)
經(jīng)??梢钥吹酱蟛糠值墓倬W(wǎng)有右側(cè)懸浮在線客服。今天來寫寫!
效果圖:
代碼如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js懸浮窗代碼(支持拖動)</title> <meta name="description" content="js浮動層特效制作懸浮在線客服代碼,放置在線QQ等聊天按鈕的在線客服浮動層代碼,支持拖動效果,可隨意在頁面上拖動位置,隨著瀏覽器滾動始終保持在懸浮在頁面上的js代碼。" /> </head> <body> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} /* KeFuDiv */ .KeFuDiv{position:absolute;height:160px;width:196px;background: #01C4C6;color:#fff;font-size:20px;text-align: center;cursor: pointer;} .KeFuDiv p{line-height: 80px;font-weight:bold;} </style> <div style="height:3000px;"></div> <div id="KeFuDiv" class="KeFuDiv" onmousedown="MoveDiv(KeFuDiv,event);"> <p> Content Me!!!<br> 我可以拖動哦?。?! </p> </div><!--KeFuDiv end--> <script type="text/javascript" src="http://7xnlea.com2.z0.glb.qiniucdn.com/online.js"></script> <script type="text/javascript"> //初始位置 gID("KeFuDiv").style.top = (document.documentElement.clientHeight - gID("KeFuDiv").offsetHeight)/2 +"px"; gID("KeFuDiv").style.left = document.documentElement.clientWidth - gID("KeFuDiv").offsetWidth +"px"; //開始滾動 ScrollDiv('KeFuDiv'); </script> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
- js 鼠標(biāo)拖動對象 可讓任何div實現(xiàn)拖動效果
- javascript 事件處理、鼠標(biāo)拖動效果實現(xiàn)方法詳解
- js實現(xiàn)可拖動DIV的方法
- 比較精簡的Javascript拖動效果函數(shù)代碼
- JS實現(xiàn)彈出浮動窗口(支持鼠標(biāo)拖動和關(guān)閉)實例詳解
- js實現(xiàn)圖片拖動改變順序附圖
- JS拖動鼠標(biāo)畫出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法
- JS實現(xiàn)可縮放、拖動、關(guān)閉和最小化的浮動窗口完整實例
- 鼠標(biāo)拖動動態(tài)改變表格的寬度的js腳本 兼容ie/firefox
- JS實現(xiàn)音量控制拖動
相關(guān)文章
JavaScript實現(xiàn)數(shù)組全排列、去重及求最大值算法示例
這篇文章主要介紹了JavaScript實現(xiàn)數(shù)組全排列、去重及求最大值算法,結(jié)合實例形式分析了JavaScript針對數(shù)組的遞歸、遍歷、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07讓innerText在firefox火狐和IE瀏覽器都能用的寫法
下面的代碼主要是用來解決firefox瀏覽器不支持innerText的問題,需要的朋友可以參考下。2011-05-05JS中的兩種數(shù)據(jù)類型及實現(xiàn)引用類型的深拷貝的方法
大家都知道在JS中數(shù)據(jù)類型按照訪問方式和存儲方式的不同可分為基本類型和引用類型。這篇文章主要介紹了JS中的兩種數(shù)據(jù)類型以及實現(xiàn)引用類型的深拷貝 ,需要的朋友可以參考下2018-08-08控制臺報錯:Cannot?access?'xxx'?before?initializatio
這篇文章主要給大家介紹了關(guān)于控制臺報錯:Cannot?access?'xxx'?before?initialization的解決方法,文中通過代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11layui動態(tài)渲染生成左側(cè)3級菜單的方法(根據(jù)后臺返回數(shù)據(jù))
今天小編就為大家分享一篇layui動態(tài)渲染生成左側(cè)3級菜單的方法(根據(jù)后臺返回數(shù)據(jù)),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09javascript應(yīng)用:Iframe自適應(yīng)其加載的內(nèi)容高度
javascript應(yīng)用:Iframe自適應(yīng)其加載的內(nèi)容高度...2007-04-04