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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
function, new function, new Function之间的区别
Mar 08 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
js使用递归解析xml
Dec 12 Javascript
js运动动画的八个知识点
Mar 12 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
JS常用算法实现代码
Nov 14 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 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输入流php://input使用浅析
2014/09/02 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
JavaScript中几种常见排序算法小结
2011/02/22 Javascript
纯JS实现的批量图片预览加载功能
2011/08/14 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
django最快程序开发流程详解
2019/07/19 Python
用django设置session过期时间的方法解析
2019/08/05 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
python 实现aes256加密
2020/11/27 Python
一些Solaris面试题
2015/12/22 面试题
业务代表的岗位职责
2013/11/16 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
国际贸易专业自荐信
2014/06/10 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
2019军训心得体会
2019/06/27 职场文书
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers