网页右侧悬浮滚动在线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 生成指定范围数值随机数
Jan 09 Javascript
javascript实现图片切换的幻灯片效果源代码
Dec 12 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
Jquery Easyui菜单组件Menu使用详解(15)
Dec 18 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
一个简单的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
PHP语法速查表
2006/12/06 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
用python爬取租房网站信息的代码
2018/12/14 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
平面设计师的工作职责
2013/11/21 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
生死抉择观后感
2015/06/09 职场文书
会议营销主持词
2015/07/03 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
Windows server 2012搭建FTP服务器
2022/04/29 Servers
使用pd.merge表连接出现多余行的问题解决
2022/06/16 Python