jquery实现右侧悬浮在线QQ客服面板可隐藏QQ客服代码-插件特效-星河码客

一款使用jquery来制作的可隐藏的在线QQ客服面板效果。该QQ客服面板会固定在页面的右侧，并且可以通过点击箭头按钮进行隐藏，适合用于应用在各种需要QQ客服的网站上。使用方法在页面中引入jquery.min.js文件。 HTML结构该在线QQ客服面板的HTML结构如下：

在线客服

热线电话

微信公众账号

CSS样式为在线QQ客服面板添加下面的CSS样式。#floatDivBoxs { width: 170px; background: #fff; position: fixed; top: 180px; right: 0; z-index: 999;}#floatDivBoxs .floatDtt { width: 100%; height: 45px; line-height: 45px; background: #f08326; color: #fff; font-size: 18px; text-indent: 22px; position: relative;}#floatDivBoxs .floatDqq { padding: 0 14px;}#floatDivBoxs .floatDqq li { height: 45px; line-height: 45px; font-size: 15px; border-bottom: 1px solid #e3e3e3; padding: 0 0 0 50px;}#floatDivBoxs .floatDtxt { font-size: 18px; color: #333; padding: 12px 14px;}#floatDivBoxs .floatDtel { padding: 0 0 15px 10px;}#floatDivBoxs .floatDtel img { display: block;}#floatDivBoxs .floatDbg { width: 100%; height: 20px; background: url(../images/online_botbg.jpg) no-repeat; box-shadow: -2px 0 3px rgba(0,0,0,0.25);}.floatShadow { background: #fff; box-shadow: -2px 0 3px rgba(0,0,0,0.25);}#rightArrow { width: 50px; height: 45px; background: url(../images/online_arrow.jpg) no-repeat; position: fixed; top: 180px; right: 170px; z-index: 999;}#rightArrow a { display: block; height: 45px;} JavaScript在页面DOM元素加载完毕之后，使用下面的jquery代码来隐藏和展示在线QQ客服面板。var flag=1;$('#rightArrow').click(function(){ if(flag==1){ $("#floatDivBoxs").animate({right: '-175px'},300); $(this).animate({right: '-5px'},300); $(this).css('background-position','-50px 0'); flag=0; }else{ $("#floatDivBoxs").animate({right: '0'},300); $(this).animate({right: '170px'},300); $(this).css('background-position','0px 0'); flag=1; }});

jquery实现右侧悬浮在线QQ客服面板可隐藏QQ客服代码

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»