js实现悬浮窗效果(支持拖动)
更新时间：2017年03月09日 10:48:53 作者：994399414
本文主要介绍了js实现悬浮窗效果(支持拖动)的实例，具有很好的参考价值。下面跟着小编一起来看下吧
经常可以看到大部分的官网有右侧悬浮在线客服。今天来写写！
效果图：
代码如下：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript实现数组全排列、去重及求最大值算法,结合实例形式分析了JavaScript针对数组的递归、遍历、排序等相关操作技巧,需要的朋友可以参考下2018-07-07
让innerText在firefox火狐和IE浏览器都能用的写法
下面的代码主要是用来解决firefox浏览器不支持innerText的问题，需要的朋友可以参考下。2011-05-05
大家都知道在JS中数据类型按照访问方式和存储方式的不同可分为基本类型和引用类型。这篇文章主要介绍了JS中的两种数据类型以及实现引用类型的深拷贝 ,需要的朋友可以参考下2018-08-08
控制台报错:Cannot access 'xxx' before initializatio
这篇文章主要给大家介绍了关于控制台报错:Cannot access 'xxx' before initialization的解决方法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了JS获取本地地址及天气的方法,结合实例形式总结分析了javascript通过浏览器、第三方API实现获取本地地址与天气的相关操作技巧,需要的朋友可以参考下2019-05-05
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
今天小编就为大家分享一篇layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
javascript应用：Iframe自适应其加载的内容高度
javascript应用：Iframe自适应其加载的内容高度...2007-04-04
本篇文章主要是对JS获取几种URL地址的方法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了JavaScript数组去重的3种方法和代码实例,本文直接给出实例代码,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了利用cookies设置每隔24小时弹出框的实例代码,需要的朋友可以参考下2017-04-04
最新评论