js QQ客服悬浮效果实现代码


Posted in Javascript onDecember 12, 2014

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QQ客服悬浮特效代码_3water.com</title>
</head>
<body style="height:2000px;">
<script type="text/javascript">
window.onload = window.onresize = window.onscroll = function ()
{
 var oBox = document.getElementById("qqbox_zzjs");
 var oLine = document.getElementById("online_lanrenzhijia");
 var oMenu = document.getElementById("menu_zzjs_net");
 var iScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 setTimeout(function ()
 {
 clearInterval(oBox.timer);
 var iTop = parseInt((document.documentElement.clientHeight - oBox.offsetHeight)/2) + iScrollTop;
 oBox.timer = setInterval(function ()
 {
  var iSpeed = (iTop - oBox.offsetTop) / 8;
  iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
  oBox.offsetTop == iTop ? clearInterval(oBox.timer) : (oBox.style.top = oBox.offsetTop + iSpeed + "px");
 }, 30)
 }, 100)
 oBox.onmouseover = function ()
 {
 this.style.width = 131 + "px";
 oLine.style.display = "block";
 oMenu.style.display = "none";
 };
 oBox.onmouseout = function ()
 {
 this.style.width = '';
 oLine.style.display = "none";
 oMenu.style.display = "block";
 };
};
document.write("<style>img{border:0;}ul,li{padding:0;margin:0;}.box_lanrenzhijia {z-index:99;right:0;width:128px;height:195px;position:absolute;}.box_lanrenzhijia .press{right:0;width:36px;cursor:pointer;position:absolute;height:128px;}.box_lanrenzhijia .zzjs_net_list{left:0;width:131px;position:absolute;height:195px;background:url(images/20120321lanrenzhijia_1.gif) no-repeat left center;}.box_lanrenzhijia .zzjs_net_list ul{padding:37px 0 0 21px;}.box_lanrenzhijia .zzjs_net_list li{height:26px;margin-bottom:3px;_margin-bottom:3px; list-style-type:none;}</style><div class=\"box_lanrenzhijia\" id=\"qqbox_zzjs\"><div class=\"zzjs_net_list\" id=\"online_lanrenzhijia\" style=\"display:none;\"><ul><li><a href=\"http://wpa.qq.com/msgrd?V=1&Uin=123456789&Site=三水点靠木&Menu=yes\"><img src=\"images/20111126lanrenzhijia_3.gif\" alt=\"三水点靠木一号客服\"></a></li><li><a href=\"http://wpa.qq.com/msgrd?V=1&Uin=123456789&Site=三水点靠木&Menu=yes\"><img src=\"images/20111126lanrenzhijia_3.gif\" alt=\"三水点靠木二号客服\"></a></li><li><a href=\"http://wpa.qq.com/msgrd?V=1&Uin=123456789&Site=三水点靠木&Menu=yes\"><img src=\"images/20111126lanrenzhijia_3.gif\" alt=\"三水点靠木三号客服\"></a></li><li><a href=\"http://wpa.qq.com/msgrd?V=1&Uin=123456789&Site=三水点靠木&Menu=yes\"><img src=\"images/20111126lanrenzhijia_3.gif\" alt=\"三水点靠木四号客服\"></a></li><li><a href=\"http://wpa.qq.com/msgrd?V=1&Uin=123456789&Site=三水点靠木&Menu=yes\"><img src=\"images/20111126lanrenzhijia_3.gif\" alt=\"三水点靠木五号客服\"></a></li></ul></div><div id=\"menu_zzjs_net\"><img src=\"images/20111126lanrenzhijia_4.gif\" class=\"press\" alt=\"在线客服\"></div></div>");
</script>
</body>
</html>
Javascript 相关文章推荐
js实现checkbox全选和反选示例
May 01 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 Javascript
Vue-cli中为单独页面设置背景色的实现方法
Feb 11 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
vue实现菜单切换功能
May 08 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
Nov 05 Javascript
js 左右悬浮对联广告特效代码
Dec 12 #Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 #Javascript
js中document.write的那点事
Dec 12 #Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 #Javascript
jQuery实现瀑布流布局
Dec 12 #Javascript
jquery+ajax验证不通过也提交表单问题处理
Dec 12 #Javascript
js 左右悬浮对联广告代码示例
Dec 12 #Javascript
You might like
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
php使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
JS实现切换标签页效果实例代码
2013/11/01 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
AngularJS基础 ng-mousemove 指令简单示例
2016/08/02 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
js仿360开机效果
2019/12/26 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
python使用tkinter实现简单计算器
2018/01/30 Python
python3调用R的示例代码
2018/02/23 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python之消除前缀重命名的方法
2018/10/21 Python
对Django的restful用法详解(自带的增删改查)
2019/08/28 Python
python使用pymongo与MongoDB基本交互操作示例
2020/04/09 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
python 6种方法实现单例模式
2020/12/15 Python
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
周仰杰(JIMMY CHOO)法国官方网站:闻名世界的鞋子品牌
2019/09/27 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android