网页右侧可隐藏的浮动QQ在线客服源码下载

网页右侧可隐藏的浮动QQ在线客服源码下载

在线客服是企业网站必不可少的在线交流渠道,本站分享的在网页右侧可隐藏的浮动QQ在线客服使用jquery编写,固定在网站右侧不随滚动条滚动,点击展开,再次点击收缩,蓝色风格,调用方便。

网页右侧可隐藏的浮动QQ在线客服效果 HTML代码:

<div id=floatTools class=jz125>
  <div class=floatL><A style="DISPLAY: none" id=aFloatTools_Show class=btnOpen 
title=查看在线客服 
onclick="javascript:$('#divFloatToolsView').animate({width: 'show', opacity: 'show'}, 'normal',function(){ $('#divFloatToolsView').show();kf_setCookie('RightFloatShown', 0, '', '/', 'www.istudy.com.cn'); });$('#aFloatTools_Show').attr('style','display:none');$('#aFloatTools_Hide').attr('style','display:block');" 
href="javascript:void(0);">展开</A> <A id=aFloatTools_Hide class=btnCtn 
title=关闭在线客服 
onclick="javascript:$('#divFloatToolsView').animate({width: 'hide', opacity: 'hide'}, 'normal',function(){ $('#divFloatToolsView').hide();kf_setCookie('RightFloatShown', 1, '', '/', 'www.istudy.com.cn'); });$('#aFloatTools_Show').attr('style','display:block');$('#aFloatTools_Hide').attr('style','display:none');" 
href="javascript:void(0);">收缩</A> </div>
  <div id=divFloatToolsView class=floatR>
    <div class=tp></div>
    <div class=cn>
      <UL>
        <LI class=top>
          <H3 class=titZx>QQ咨询</H3>
        </LI>
        <LI><SPAN class=icoZx>在线咨询</SPAN> </LI>
        <LI><A class=icoTc href="#">A老师</A> </LI>
        <LI><A class=icoTc href="javascript:void(0);">B老师</A> </LI>
        <LI><A class=icoTc href="#">C老师</A> </LI>
        <LI class=bot><A class=icoTc href="javascript:void(0);">D老师</A> </LI>
      </UL>
      <UL class=webZx>
        <LI class=webZx-in><A href="http://www.125jz.com/" target="_blank" style="FLOAT: left"><IMG src="images/right_float_web.png" border="0px"></A> </LI>
      </UL>
      <UL>
        <LI>
          <H3 class=titDh>电话咨询</H3>
        </LI>
        <LI><SPAN class=icoTl>400-000-0000</SPAN> </LI>
        <LI class=bot>
          <H3 class=titDc><A href="http://www.125jz.com/" target="_blank">新版调查</A></H3>
        </LI>
      </UL>
    </div>
  </div>
</div>

网页右侧可隐藏的浮动QQ在线客服效果源码下载地址:

源码下载

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2441.html

(0)
江山如画的头像江山如画管理团队
div+css制作上中下,中间两列的全屏自适应布局
上一篇 2018年8月2日 下午2:23
WordPress如何设置登陆后才可查看内容或下载文件
下一篇 2018年8月2日 下午3:42

99%的人还看了以下文章

  • 立体动画按钮、切换开关

    实例名称:立体动画按钮、切换开关在线预览:https://codepen.io/chrisgannon/pen/ZaPmKp HTML代码: <div id=”app”></div> CSS代码: body { background-color:#FFFCF9; overflow: hidden; text-align:center;…

    2019年10月17日
    14.2K0
  • 100种精美的网页时钟特效,总有一款是你需要的

    web骇客收集了100种使用CSS+JS+HTML制作的时钟、钟表、手表等特效,分为漂亮的时钟特效、有创意的时钟、电子钟,每一种实现都提供源代码,可以方便网页制作爱好者们拷贝使用,如果你需要在网页中添加时钟特效,在这里一定会有一款你喜欢的。

    2018年9月27日
    12.8K0
  • 纯CSS制作二级导航菜单(纵向),不用JS/jquery,响应速度快

    今天分享一款纯CSS制作的二级导航菜单,不用JS/jquery,响应速度快。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>制作二级导航菜单(纵向)</title> <style type…

    2018年9月19日
    12.8K0
  • 导航特效:jquery实现当前(活动)菜单样式变化

    用户点击导航或菜单上不同的栏目,被选中的导航栏目会变换样式,出现图片或背景颜色的变化,用于标识是否是当前栏目或活动选项。 本教程使用jquery实现导航菜单当前(活动)菜单样式变化,导航菜单模式用的是背景颜色,你可以换成背景图片以符合建站需要。 当前(活动)菜单样式变化实现原理 在html代码中给首页(默认选中)加上class名cur <a href=…

    2018年2月8日
    7.8K0
  • ScrollPicLeft.js实现的图片前后切换效果-源码下载

    ScrollPicLeft.js实现的图片的前后切换效果,适用于网页中的证书展示、推荐商品之类的栏目。 功能:可以手动点击前后切换箭头按钮,进行图片的翻页,浏览上一张,下一张的效果。 特点:代码精简,不需要使用JQuery,功能强大,使用非常的简单,便利。! 在网页引入ScrollPicLeft.js <script type=”text/javasc…

    2019年11月1日
    9.1K0
  • JS+CSS实现点击弹出窗口,带关闭按钮(非常简单)

    最近做网页设计项目,要求点击图片后弹出窗口,在新弹出窗口中播放视频。从网上找了很多代码,要么非常复杂,要么兼容性有问题,反复对比多种实现方法,最后确定代码如下: <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″/> <title>JS+CSS实现…

    2018年5月9日
    9.8K0

发表回复

登录后才能评论