JS实现从顶部下拉显示的带动画QQ客服特效代码
本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码。分享给大家供大家参考，具体如下：
这是一款动画版QQ在线客服代码，从网页顶部下拉出来的QQ客服，下滑结束后有弹性缓冲效果。在世界地图的映衬下，似乎一下子上升了品位。动画效果是由jq实现的，QQ客服的一些信息自己修改下，换成你自己的QQ，上传到网页就可用啦。注：在火狐台chrome浏览器中测试效果会更好。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-top-show-down-dh-qq-online-codes/
具体代码如下：
<!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>
<title>网页顶部下拉的jquery在线客服</title>
<style>
*{margin: 0px;padding: 0px;list-style: none;}
#qqlist a{text-decoration: none;color: black;font-size: 12px;display: block;line-height: 28px;vertical-align: middle;}
img{line-height: 28px;vertical-align: middle;text-align: center;padding-bottom: 6px;}
#cs{width: 100%;height: 0px;border-bottom: 3px solid red;-webkit-box-shadow: 2px 2px 2px #999;position: relative;top: 0px;-moz-box-shadow: 2px 2px 2px #999;box-shadow: 2px 2px 2px #999;}
#qqlist{position: absolute;left: -200px;top: 150px;z-index: 1;}
#qqlist ul li{width: 80px;height: 28px;margin: 10px;}
#bg{width: 918px;height: 500px;position: absolute;right: 10px;display: none;filter: alpha(opacity: 0);opacity: 0;}
#btn{width: 100px;height: 20px;margin: auto;background: red;-webkit-box-shadow: 2px 2px 2px #999;border-radius: 0 0 8px 8px;position: relative;top: 0px;-moz-box-shadow: 2px 2px 2px #999;box-shadow: 2px 2px 2px #999;}
#btn span{display: block;color: white;text-align: center;line-height: 20px;cursor: pointer;font-size: 12px;}
#foot_bm a, #foot_bm, p, p a{color: #666;position: relative;}
</style>
<script>
function startMove(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var bStop=true;
for (var attr in json)
{
var now=0;
if(attr=="opacity")
{
now=Math.round(parseFloat(getStyle(obj,attr))*100);
}
else
{
now=parseInt(getStyle(obj,attr));
}
var speed=(json[attr]-now)/10;
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]=(now+speed)+"px";
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
}, 30)
}
function startFlex(obj,json,fnEnd)
{
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var bStop=true;
var cur=0;
for(var attr in json)
{
if(!obj.oSpeed)obj.oSpeed={};
if(!obj.oSpeed[attr])obj.oSpeed[attr]=0;
cur=parseInt(getStyle(obj,attr));
if(Math.abs(json[attr]-cur)>1 || Math.abs(obj.oSpeed[attr])>1)
{
bStop=false;
obj.oSpeed[attr]+=(json[attr]-cur)/5;
obj.oSpeed[attr]*=0.7;
var maxSpeed=65;
if(Math.abs(obj.oSpeed[attr])>maxSpeed)
{
obj.oSpeed[attr]=obj.oSpeed[attr]>0?maxSpeed:-maxSpeed;
}
obj.style[attr]=cur+obj.oSpeed[attr]+"px";
}
}
if(bStop)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
}, 30);
}
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
window.onload=function()
{
var oCs=document.getElementById('cs');
var oBtn=document.getElementById('btn').getElementsByTagName('span')[0];
var oImg=document.getElementById('bg');
var oLi=document.getElementById('qqlist').getElementsByTagName('li');
var on=0;
for(var i=0; i<oLi.length; i++)
{
oLi[i].style.left=oLi[i].offsetLeft+"px";
oLi[i].style.top=oLi[i].offsetTop+"px";
}
for(var i=0; i<oLi.length; i++)
{
oLi[i].style.position="absolute";
oLi[i].style.margin=0;
}
function showImg()
{
oImg.style.display="block";
startMove(oImg,{opacity:80},function()
{
showQQ(350);
});
}
function showQQ(iTarget)
{
var i=1;
startFlex(oLi[0],{left:iTarget});
timer=setInterval(function()
{
startFlex(oLi[i],{left:iTarget});
i++;
if(i>=oLi.length)
{
clearInterval(timer);
}
}, 20);
}
oBtn.onclick=function()
{
if(on==0)
{
startFlex(oCs,{height:500},function()
{
showImg();
oBtn.innerHTML="CLOSE";
});
on=1;
}
else
{
showQQ(-200);
timer2=setInterval(function()
{
startMove(oImg,{opacity:0},function()
{
oImg.style.display="none";
startMove(oCs,{height:0});
})
if(oCs.style.height==0+"px")
{
clearInterval(timer2);
oBtn.innerHTML="CONTACT US";
}
},500);
on=0;
}
}
}
</script>
</head>
<body>
<div id="cs">
<div id="qqlist">
<ul>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点这里发消息" title="您的网站"/> 售前咨询</a></li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点这里发消息" title="您的站名"/> 售前咨询</a></li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点这里发消息" title="您的站名"/> 售前咨询</a></li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点这里发消息" title="您的站名"/> 售前咨询</a></li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点这里发消息" title="您的站名"/> 售前咨询</a></li>
<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:123456789:52" alt="点这里发消息" title="您的站名"/> 售前咨询</a></li>
</ul>
</div>
<div id="bg"><img src="images/bgbg.png"/></div>
</div>
<div id="btn"><span>联系我们</span></div>
</body>
</html>
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
原生js实现网页顶部自动下拉/收缩广告效果
知识要点 1.实现原理: 通过递归改变div的高度值达到缓慢下拉的效果. 2.一共分为3个步骤我写了三个函数 第一个show()函数(下拉):初始值高度h<300的话 h+5 反之return退出停止,调用setTimeout方法30毫秒执行一次+5 第二个hide()函数(收回):只是高度的判断不同高度h-5 反之return退出停止,调用setTimeout方法30毫秒执行一次-5 第三个dd()函数(再次弹出):这里要注意的是第二次弹出的div是一个新的div把它的高度设置为0,实现原理
-
顶部缓冲下拉菜单导航特效的JS代码
复制代码 代码如下: <script type="text/javascript"> $(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px'
-
JS实现从顶部下拉显示的带动画QQ客服特效代码
本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码.分享给大家供大家参考,具体如下: 这是一款动画版QQ在线客服代码,从网页顶部下拉出来的QQ客服,下滑结束后有弹性缓冲效果.在世界地图的映衬下,似乎一下子上升了品位.动画效果是由jq实现的,QQ客服的一些信息自己修改下,换成你自己的QQ,上传到网页就可用啦.注:在火狐台chrome浏览器中测试效果会更好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-show-down-
-
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
本文实例讲述了jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码.分享给大家供大家参考,具体如下: 这是一个黑色的QQ客服代码,显示在网页右侧,点击后会向左展开QQ客服的完整内容,适用的网站范围广,以前发过不少的在线客服,每一款都风格不同,你可以在网页特效栏目搜索"在线客服"看下有你需要的不. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-show-qq-online-kf-codes/ 具体代码如
-
基于JS快速实现导航下拉菜单动画效果附源码下载
这是一个带变形动画特效的下拉导航菜单特效.该导航菜单在菜单项之间切换时,下拉菜单会快速的根据菜单内容的大小来动态变形,显示合适的下拉菜单大小,效果非常棒. 快速的导航下拉菜单动画效果如下所示: 效果演示 源码下载 HTML 该导航菜单的HTML结构如下: <header class="cd-morph-dropdown"> <a href="#0" class="nav-trigger">Open Nav&
-
JS实现灵巧的下拉导航效果代码
本文实例讲述了JS实现灵巧的下拉导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于JS实现下拉菜单,是一款灵巧的网站导航条,支持二级显示,向下滑动显示,经典的下拉菜单,JS和CSS共同编写实现,Li菜单列表风格,便于修改,兼容各大主流浏览器,相信你也会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-down-nav-blue-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC
-
js 单击式的下拉菜单效果实例
复制代码 代码如下: <!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=&qu
-
vue实现select下拉显示隐藏功能
今日,怂怂就来说说,在项目中刚遇到这么一个功能需求: 描述:当下拉选择不同的属性选项,需展示对应的内容界面: select下拉菜单如下: 当下拉选择[表结构变更].即展示如下界面: 当下拉选择[接口变更].即展示如下界面: 代码实现 vue.js: //定义一个select下拉菜单 <el-form-item label="类型"> <el-select v-model="form.typeChanges"> <el-option la
-
Android实现微信右侧顶部下拉对话框
我们使用微信都知道,其右侧顶部有一个下拉对话框,我们可以执行添加好友,扫一扫等功能,今天我们就来模仿实现一下这个功能(实现的方式有很多种,我今天只说一种借助透明主题Activity的方式实现:如果有兴趣还可以移步至仿淘宝底部导航栏):本篇的实现的效果如下: 下面就来说一说实现的思路(重要): 第一步:创建弹出对话框布局 <?xml version="1.0" encoding="UTF-8"?> <RelativeLayout xmlns:andr
-
js面向对象封装级联下拉菜单列表的实现步骤
本实例开发的级联下拉菜单是根据已有json数据创建的DOM元素.点击文本框后,显示一级菜单.如果菜单中包含子菜单,菜单右侧会有指示箭头.点击菜单之后,会再显示下一级菜单,以此类推.当菜单下无子菜单时,选择菜单后会在文本框中显示. 打开后的级联菜单效果如图所示: 使用实例中封装好的插件,只需要有一个input元素,即可通过插件自动生成级联下拉菜单,html代码如下所示: <div style="margin-top:100px;text-align:center;"> <
-
JS仿百度自动下拉框模糊匹配提示
实际项目中,我们可以把数据获取改成ajax动态获取,在 getContent()中 <!DOCTYPE> <html> <head> <title>js/jQuery实现类似百度搜索功能</title> <meta name="Author" content="Michael"> <meta name="Keywords" content="js/jQuery
-
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
问题如下图所示: 一般处理此类问题都会有一个属性:"event.preventDefault()",但是如果直接使用会导致页面的内部滚动也失效导致不能滚动,我所处理的方式也与其类似. 因为滑动区域是向走的,所以滑动块的顶部到浏览器顶部的距离最大为0(其余为负值[$('#bodycthead').offset().top]),当为0的时候说明已经回到了顶部,继续向下拉动的时候就不应该有反应,可以禁止默认滑动,而向上拉动的时候应该取消默认的滑动,所以应该将"event.preve