js實(shí)現(xiàn)懸浮窗效果(支持拖動(dòng))
更新時(shí)間：2017年03月09日 10:48:53 作者：994399414
本文主要介紹了js實(shí)現(xiàn)懸浮窗效果(支持拖動(dòng))的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
經(jīng)常可以看到大部分的官網(wǎng)有右側(cè)懸浮在線客服。今天來寫寫！
效果圖：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js懸浮窗代碼(支持拖動(dòng))</title>
<meta name="description" content="js浮動(dòng)層特效制作懸浮在線客服代碼，放置在線QQ等聊天按鈕的在線客服浮動(dòng)層代碼，支持拖動(dòng)效果，可隨意在頁面上拖動(dòng)位置，隨著瀏覽器滾動(dòng)始終保持在懸浮在頁面上的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>
我可以拖動(dòng)哦?。。?
</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";
//開始滾動(dòng)
ScrollDiv('KeFuDiv');
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- js 鼠標(biāo)拖動(dòng)對(duì)象 可讓任何div實(shí)現(xiàn)拖動(dòng)效果
- javascript 事件處理、鼠標(biāo)拖動(dòng)效果實(shí)現(xiàn)方法詳解
- js實(shí)現(xiàn)可拖動(dòng)DIV的方法
- 比較精簡(jiǎn)的Javascript拖動(dòng)效果函數(shù)代碼
- JS實(shí)現(xiàn)彈出浮動(dòng)窗口(支持鼠標(biāo)拖動(dòng)和關(guān)閉)實(shí)例詳解
- js實(shí)現(xiàn)圖片拖動(dòng)改變順序附圖
- JS拖動(dòng)鼠標(biāo)畫出方框?qū)崿F(xiàn)鼠標(biāo)選區(qū)的方法
- JS實(shí)現(xiàn)可縮放、拖動(dòng)、關(guān)閉和最小化的浮動(dòng)窗口完整實(shí)例
- 鼠標(biāo)拖動(dòng)動(dòng)態(tài)改變表格的寬度的js腳本 兼容ie/firefox
- JS實(shí)現(xiàn)音量控制拖動(dòng)
相關(guān)文章
JavaScript實(shí)現(xiàn)數(shù)組全排列、去重及求最大值算法示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)組全排列、去重及求最大值算法,結(jié)合實(shí)例形式分析了JavaScript針對(duì)數(shù)組的遞歸、遍歷、排序等相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
讓innerText在firefox火狐和IE瀏覽器都能用的寫法
下面的代碼主要是用來解決firefox瀏覽器不支持innerText的問題，需要的朋友可以參考下。2011-05-05
JS中的兩種數(shù)據(jù)類型及實(shí)現(xiàn)引用類型的深拷貝的方法
大家都知道在JS中數(shù)據(jù)類型按照訪問方式和存儲(chǔ)方式的不同可分為基本類型和引用類型。這篇文章主要介紹了JS中的兩種數(shù)據(jù)類型以及實(shí)現(xiàn)引用類型的深拷貝 ,需要的朋友可以參考下2018-08-08
控制臺(tái)報(bào)錯(cuò):Cannot?access?'xxx'?before?initializatio
這篇文章主要給大家介紹了關(guān)于控制臺(tái)報(bào)錯(cuò):Cannot?access?'xxx'?before?initialization的解決方法,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了JS獲取本地地址及天氣的方法,結(jié)合實(shí)例形式總結(jié)分析了javascript通過瀏覽器、第三方API實(shí)現(xiàn)獲取本地地址與天氣的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
layui動(dòng)態(tài)渲染生成左側(cè)3級(jí)菜單的方法(根據(jù)后臺(tái)返回?cái)?shù)據(jù))
今天小編就為大家分享一篇layui動(dòng)態(tài)渲染生成左側(cè)3級(jí)菜單的方法(根據(jù)后臺(tái)返回?cái)?shù)據(jù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript應(yīng)用：Iframe自適應(yīng)其加載的內(nèi)容高度
javascript應(yīng)用：Iframe自適應(yīng)其加載的內(nèi)容高度...2007-04-04
本篇文章主要是對(duì)JS獲取幾種URL地址的方法進(jìn)行了總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
JavaScript數(shù)組去重的3種方法和代碼實(shí)例
這篇文章主要介紹了JavaScript數(shù)組去重的3種方法和代碼實(shí)例,本文直接給出實(shí)例代碼,需要的朋友可以參考下2015-07-07
JS利用cookies設(shè)置每隔24小時(shí)彈出框
這篇文章主要介紹了利用cookies設(shè)置每隔24小時(shí)彈出框的實(shí)例代碼,需要的朋友可以參考下2017-04-04