扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
跟随滚动条的使用样式就可以了:position:fixed;
创新互联主要从事网页设计、PC网站建设(电脑版网站建设)、wap网站建设(手机版网站建设)、成都响应式网站建设、程序开发、网站优化、微网站、小程序制作等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了丰富的网站设计、网站制作、网站设计、网络营销经验,集策划、开发、设计、营销、管理等多方位专业化运作于一体。
点击关闭和打开就用jquery的animate对浮动的right样式处理就行:
//原来样式设定的right:0;
//例如你浮动客服的元素宽度为300px
$("关闭ID").click(function(){
$("整个浮动的ID").animate({right:"-300px"},600);//第二个参数是隐藏进去的时间
});
//打开也一样,同上 改变一下right的样式值就行
本文实例讲述了jQuery实现的网页左侧在线客服效果代码。分享给大家供大家参考,具体如下:
这是又一个网页上的在线客服代码,不错,可以用一下哦。与其它客服不一样的地方呢?无非是在网页左侧滑出,可对客服类型分组,又多了一个功能,哈哈。
运行效果截图如下:
在线演示地址如下:
具体代码如下:
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
title网页左侧浮动jquery在线QQ客服代码/title
style
*{margin:0px;padding:0px;outline:none;list-style-type:none;border:none;}
/*
QQbox
*/
.QQbox{z-index:1000;width:410px;left:-276px;top:0;margin:149px
0;position:fixed;}
*html,
*html
body{background-image:url(about:blank);background-attachment:fixed;}
*html
.QQbox{position:absolute;
top:expression(eval(document.documentElement.scrollTop));}
.QQbox
.press{left:0;border:none;cursor:pointer;width:32px;height:96px;position:absolute;padding-top:140px;}
.QQbox
.Qlist{float:left;width:410px;background:url(images/bj01.png)
no-repeat;background-position:1px
0px;height:436px;display:block;overflow:hidden;zoom:1;}
.QQbox
.Qlist
.infobox{text-align:center;background-repeat:no-repeat;padding:5px;line-height:14px;color:#CCCCCC;font-weight:700;}
.QQbox
.Qlist
.con{margin-top:266px;margin-left:50px;color:#32567e;font-size:14px;}
.QQbox
.Qlist
.con
ul
li{height:31px;list-style:none;margin-left:35px;}
.QQbox
.Qlist
.con
ul
li
a{font-size:13px;margin-left:18px;text-decoration:none;}
.OnlineLeft{float:left;display:inline;width:262px;height:439px;overflow:hidden;zoom:1;}
.OnlineBtn{float:right;display:inline;width:127px;height:36px;background:url(images/bj02.png)
no-repeat;margin-top:-45px;margin-left:220px;}
/style
script
type="text/javascript"
src="jquery-1.6.2.min.js"/script
/head
body
div
id="divQQbox"
class="QQbox"
div
id="divOnline"
class="Qlist"
div
class="OnlineLeft"
div
class="con"
ul
li售前咨询a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
li网站建设a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
li网站优化a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
li整合营销a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
li售后服务a
target="_blank"
href="tencent://message/?uin=12345678Site=;Menu=yes"img
border="0"
src=""/a/li
/ul
/div
/div
div
class="OnlineBtn"
/div
/div
/div
script
type="text/javascript"
$(function(){
//建站热线展开效果
$("#divQQbox").hover(
function(){
$(this).stop(true,false);
$(this).animate({left:0},300);
},
function(){
$(this).animate({left:-276},149);
}
)
});
/script
/body
/html
希望本文所述对大家jQuery程序设计有所帮助。
QQ 客服是QQ互联的一种应用
已可以在登录QQ,生成代码,复制到网站就行了
1、登录网站登录作为QQ客服的号码
2、选择组件的风格样式
3、复制对应的代码
4、嵌入到网站合适的地方
----------望采纳
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流