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中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
微信JS接口汇总及使用详解
Jan 09 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
AngularJS学习笔记之表单验证功能实例详解
Jul 06 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
vue+element tabs选项卡分页效果
Jun 29 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有道翻译api调用方法实例
2014/12/22 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
Js 随机数产生6位数字
2010/05/13 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
js实现蒙版效果
2020/01/11 Javascript
Vue 实例中使用$refs的注意事项
2021/01/29 Vue.js
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
浅析python redis的连接及相关操作
2019/11/07 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
Python通过format函数格式化显示值
2020/10/17 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
JavaScript实现前端网页版倒计时
2021/03/24 Javascript
职称自我鉴定
2013/10/15 职场文书
法律七进实施方案
2014/03/15 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
2014年组织部工作总结
2014/11/14 职场文书
年底个人总结范文
2015/03/10 职场文书