网页右侧悬浮滚动在线qq客服代码示例


Posted in Javascript onApril 28, 2014

网页右侧悬浮滚动QQ在线客服代码

网页右侧悬浮滚动在线qq客服代码示例

function myEvent(obj,ev,fn){
 if (obj.attachEvent){
  obj.attachEvent('on'+ev,fn);
 }else{
  obj.addEventListener(ev,fn,false);
 };
};
function getbyClass(id,sClass){
 var oParent = document.getElementById(id);
 var all = oParent.getElementsByTagName('*');
 var array = [];
 for (var i=0; i<all.length; i++){
  if (all[i].className == sClass){
   array.push(all[i]);
  };
 };
 return array;
};
function getStyle(obj,name){
 if(obj.currentStyle){
  return obj.currentStyle[name];
 }else{
  return getComputedStyle(obj,false)[name];
 };
};
function Running(obj,json,fnEnd){
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
  var now=0;
  var bStop=true;
  for (var attr in json){
   if(attr=='opacity'){
    now=Math.round(parseFloat(getStyle(obj,attr))*100);
   }else{
    now=parseInt(getStyle(obj,attr));
   };
   var speed=(json[attr]-now)/5;
   speed=speed>0?Math.ceil(speed):Math.floor(speed);
   if(now!=json[attr])bStop=false;
   if(attr=='opacity'){
    obj.style.filter='alpha(opacity:'+now+speed+')';
    obj.style.opacity=(now+speed)/100;
   }else{
    obj.style[attr]=speed+now+'px';
   };
  }
  if(bStop){
   clearInterval(obj.timer);
   if(fnEnd)fnEnd();
  }
 }, 30);
}
function Flexing(obj,json,fnEnd){
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
  var now=0;
  var bStop=true;
  for (var attr in json){
   if(!obj.speed)obj.speed={};
   if(!obj.speed[attr])obj.speed[attr]=0;
   now=parseInt(getStyle(obj,attr));
   if(Math.abs(json[attr]-now)>1 || Math.abs(obj.speed[attr])>1){
    bStop=false;
    obj.speed[attr]+=(json[attr]-now)/5;
    obj.speed[attr]*=0.85;
    var MaxSpeed=65;
    if(Math.abs(obj.speed[attr])>MaxSpeed){
     obj.speed[attr]=obj.speed[attr]>0?MaxSpeed:-MaxSpeed;
    };
    obj.style[attr]=now+obj.speed[attr]+'px';
   };
  };
  if(bStop){
   clearInterval(obj.timer);
   obj.style[attr]=json[attr]+'px';
   if(fnEnd)fnEnd();
  };
 }, 30);
}
function setqq(obj,num){
 if (obj.length!=num.length){
  alert('\nspan的个数与QQ号码的个数不符,请设置5个QQ号码!\n\n[设置未成功!]');
  return;
 }else{
  for (var i=0; i<num.length; i++){
   obj[i].innerHTML = "<a target='_blank' href='http://wpa.qq.com/msgrd?v=3&uin="+num[i]+"&site=qq&menu=yes'><img border='0' src='http://wpa.qq.com/pa?p=2:"+num[i]+":51' alt='点击咨询' title='点击咨询'/></a>";
  };
 };
};
function settop(id,id2,top){
 var obj = document.getElementById(id);
 var box = document.getElementById(id2);
 obj.style.top = box.style.top = top+'px';
};
function dealy(id,time){
 var obj = document.getElementById(id);
 var timer = setTimeout(function(){
  Flexing(obj,{right:-100});
 },time*1000);
};
function click_fn(id,id2){
 var obj = document.getElementById(id);
 var box = document.getElementById(id2);
 obj.onclick = function(){
  Running(obj,{right:-200},function(){
   box.style.display = 'block';
   Running(box,{right:10, opacity:100});     
  });
 };
 box.onclick = function(){
  timer = setTimeout(function(){
   Running(box,{right:-220,opacity:0},function(){
    box.style.display = 'none';
    Flexing(obj,{right:-100});
   });   
  },3000);
 };
};
Javascript 相关文章推荐
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
一个php+js实时显示时间问题
Oct 12 Javascript
JS实现环形进度条(从0到100%)效果
Jul 05 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
vue按需引入element Transfer 穿梭框
Sep 30 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
一个简单的jquery进度条示例
Apr 28 #Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 #Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 #Javascript
node.js中的socket.io入门实例
Apr 26 #Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
Apr 25 #Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 #Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 #Javascript
You might like
MVC模式的PHP实现
2006/10/09 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
JavaScript的面向对象(二)
2006/11/09 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
js实现文字滚动效果
2016/03/03 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
gulp安装以及打包合并的方法教程
2017/11/19 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
2019/05/21 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
Python属性和内建属性实例解析
2020/01/14 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
婚庆司仪主持词
2014/03/15 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
设计专业自荐信
2014/06/19 职场文书
导游词400字
2015/02/13 职场文书
2015年房地产个人工作总结
2015/05/26 职场文书
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android