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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
easyUI combobox实现联动效果
Jan 17 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
详解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
Linux操作系统安装LAMP环境
2015/06/26 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
文本加密解密
2006/06/23 Javascript
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
深入理解react-router@4.0 使用和源码解析
2017/05/23 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
Js通过AES加密后PHP用Openssl解密的方法
2019/07/12 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
使用Python判断质数(素数)的简单方法讲解
2016/05/05 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
对python创建及引用动态变量名的示例讲解
2018/11/10 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python实现对列表中的元素进行倒序打印
2019/11/23 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
网络维护中文求职信
2014/01/03 职场文书
大型晚会策划方案
2014/02/06 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
幼儿教师求职信
2014/05/24 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
2014年变电站工作总结
2014/12/19 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL