js实现悬浮窗效果(支持拖动)


Posted in Javascript onMarch 09, 2017

经常可以看到大部分的官网有右侧悬浮在线客服。今天来写写!

效果图:

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 相关文章推荐
基于jQuery的日期选择控件
Oct 27 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 Javascript
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
Vue.js组件高级特性实例详解
Dec 24 Javascript
手写Vue弹窗Modal的实现代码
Sep 11 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
聊聊JS ES6中的解构
Apr 29 Javascript
vue2的 router在使用过程中遇到的一些问题
Apr 13 Vue.js
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 #Javascript
Bootstrap禁用响应式布局的实现方法
Mar 09 #Javascript
微信小程序 template模板详解及实例代码
Mar 09 #Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 #Javascript
canvas实现爱心和彩虹雨效果
Mar 09 #Javascript
vue如何实现observer和watcher源码解析
Mar 09 #Javascript
详解VueJs异步动态加载块
Mar 09 #Javascript
You might like
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
WordPress开发中自定义菜单的相关PHP函数使用简介
2016/01/05 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
js简单实现用户注册信息的校验代码
2013/11/15 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
Bootstrap源码解读表单(2)
2016/12/22 Javascript
如何提高数据访问速度
2016/12/26 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
[58:58]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第二场
2018/04/05 DOTA
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
Python使用itertools模块实现排列组合功能示例
2018/07/02 Python
Python类的继承用法示例
2019/01/31 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
opencv 图像轮廓的实现示例
2020/07/08 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
创新比赛获奖感言
2014/02/13 职场文书
应届毕业生求职信
2014/05/26 职场文书
装修施工安全责任书
2014/07/24 职场文书