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温习的一些笔记 基础常用知识小结
Jun 22 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
纯CSS3代码实现滑动开关效果
Aug 19 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
Node.js安装配置图文教程
May 10 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
浅谈Web Storage API的使用
Jun 23 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
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php实现分页显示
2015/11/03 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
一个简单的javascript类定义例子
2009/09/12 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
Javascript的this用法
2017/01/16 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
2019/11/19 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
logging level级别介绍
2020/02/21 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
房屋分割离婚协议书范本
2014/12/01 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL
python 进阶学习之python装饰器小结
2021/09/04 Python
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript
TS 类型兼容教程示例详解
2022/09/23 Javascript