首页 > 特效插件 > 在线客服 >  带图片滚动的功能强大的js在线QQ客服正文

带图片滚动的功能强大的js在线QQ客服

特效介绍
js在线QQ客服

    带图片滚动的功能强大的js在线QQ客服，点击右侧在线客服，即可弹出带tab选项卡的客服面板：客服列表、产品资料、战略合作、联系我们。产品资料还自带幻灯图片。如果不点击，本客服也会自动在3秒后弹出。不兼容IE6，请使用IE8或更高版本或其他浏览器访问。
使用方法
1、在head区域引入下面的js文件和css文件：
<link rel="stylesheet" type="text/css" href="css/5imoban.net.css" />
<script type="text/javascript" src="js/5imoban.net.js"></script>
2、把以下代码拷贝到您的html页面:
<div id='cs_online'>
  <span class='cs_title'><img style='padding-top:5px;' src='images/qq.png' width='20'/>在线客服    </span>
    <ul class='cs_options'>
        <li>客服列表</li>
        <li>产品资料</li>
        <li>战略合作</li>
        <li>联系我们</li>
    </ul>
  <div class='cs_context' style='display:block;'>
        <ul id='cs_qlist'>
            <li><span>产品咨询：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=147430218&site=qq&menu=yes"><img border=0 src='images/q_list.png' title='产品咨询' width='20px'/></a></li>
            <li><span>产品咨询：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=147430218&site=qq&menu=yes"><img border=0  src='images/q_list.png' title='产品咨询' width='20px'/></a></li>
            <li><span>产品咨询：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=147430218&site=qq&menu=yes"><img border=0  src='images/q_list.png' title='产品咨询' width='20px'/></a></li>
            <li><span>产品咨询：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=147430218&site=qq&menu=yes"><img border=0  src='images/q_list.png' title='产品咨询' width='20px'/></a></li>
            <li><span>技术支持：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=147430218&site=qq&menu=yes"><img border=0  src='images/q_list.png' title='技术支持' width='20px'/></a></li>
            <li><span>技术支持：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=147430218&site=qq&menu=yes"><img border=0  src='images/q_list.png' title='技术支持' width='20px'/></a></li>
            <li><span>技术支持：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=147430218&site=qq&menu=yes"><img border=0  src='images/q_list.png' title='技术支持' width='20px'/></a></li>
            <li><span>技术支持：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=147430218&site=qq&menu=yes"><img border=0  src='images/q_list.png' title='技术支持' width='20px'/></a></li>
            <li><span>投诉建议：</span><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=147430218&site=qq&menu=yes"><img border=0  src='images/q_list.png' title='投诉建议' width='20px'/></a></li>
        </ul>
    </div>
    <div class='cs_context'>
        <div id='cs_product'>
            <ul>
                <li><a href="http://www.5imoban.net/" target="_blank"><img src='images/01.jpg' /></a></li>
                <li><a href="http://www.5imoban.net/" target="_blank"><img src='images/02.jpg' /></a></li>
                <li><a href="http://www.5imoban.net/" target="_blank"><img src='images/03.jpg' /></a></li>
                <li><a href="http://www.5imoban.net/" target="_blank"><img src='images/04.jpg' /></a></li>
                <li><a href="http://www.5imoban.net/" target="_blank"><img src='images/05.jpg' /></a></li>
            </ul>
        </div>
        <div id='cs_product_num'>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>            
        </div>
    </div>
  <div class='cs_context'>
        <div id='cs_cooperation'></div>
    </div>
  <div class='cs_context'>
        <div id='cs_contact'>
            <span class='cs_contact_span'>
                合肥xx网络科技有限公司<br/>
                公司地址:合肥市xxx区xxx路xxx商务中心xx层<br/>
                联系电话:021-65xxxxxx<br/>
                电子信箱:xxxx@abc.com<br/>
                开发者:xxxxxx<br/>
            </span>
        </div>
    </div>
</div>
3、自动弹出时间设置：
打开5imoban.net.js，找到“var second=3”，更改参数即可。
TAGS: js在线QQ客服