脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 悬浮窗

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知识点总结(十一)之js中的Object类详解

    JavaScript知识点总结(十一)之js中的Object类详解

    这篇文章主要介绍了JavaScript知识点总结(十一)之js中的Object类详解的相关资料,需要的朋友可以参考下
    2016-05-05
  • 小程序使用分包的示例代码

    小程序使用分包的示例代码

    这篇文章主要介绍了小程序使用分包的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • 聊一聊JavaScript的URL对象是什么

    聊一聊JavaScript的URL对象是什么

    这篇文章主要介绍了JavaScript的URL对象是什么，还有各个属性的具体实现方法，对JS URL感兴趣的同学，可以参考下
    2021-05-05
  • javascript 闪烁的圣诞树实现代码

    javascript 闪烁的圣诞树实现代码

    用js实现非常漂亮的带闪烁效果的圣诞树代码。很佩服作者的想法。效果如下图。
    2009-12-12
  • 浅谈layui使用模板引擎动态渲染元素要注意的问题

    浅谈layui使用模板引擎动态渲染元素要注意的问题

    今天小编就为大家分享一篇浅谈layui使用模板引擎动态渲染元素要注意的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序之几种常见的弹框提示信息实现详解

    微信小程序之几种常见的弹框提示信息实现详解

    这篇文章主要介绍了微信小程序之几种常见的弹框提示信息实现详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • JavaScript出现setTimeout倒计时误差的原因分析

    JavaScript出现setTimeout倒计时误差的原因分析

    setTimeout 倒计时误差的出现主要与 JavaScript 的事件循环机制和计时器的执行方式有关，本文就来和大家讲讲具体出现的原因以及解决方法，需要的可以参考一下
    2023-06-06
  • js对象之JS入门之Array对象操作小结

    js对象之JS入门之Array对象操作小结

    每天一对象,今天我们也来new一个。没有系统的学过JS，没有特别的写过一个比较出色的类库，没有运用过一个很强的类库，prototype.js在进行着，慢慢的前进相信不久的将来就可以应用prototype.js来开发自己的应用程序了。
    2011-01-01
  • JavaScript中常见的Polyfill介绍

    JavaScript中常见的Polyfill介绍

    在多姿多彩的JavaScript世界,Polyfill如同一座架在浏览器兼容性鸿沟之上的桥梁,本文将介绍常见的JavaScript Polyfill兼容方案,并举例说明它们的应用,需要的可以参考下
    2023-12-12
  • 浅谈JavaScript的innerWidth与innerHeight

    浅谈JavaScript的innerWidth与innerHeight

    下面小编就为大家带来一篇浅谈JavaScript的innerWidth与innerHeight。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论