搜索
首页 电脑/网络

javascript实现在线客服效果_javascript技巧

全部回答

2023-03-25

0 0

    在线客服系统在大量的网站都有应用,特别是销售类网站,可以有效的增加网站的可用性,便于客户及时联系商家,从而增加了交易成功的可能性,在线客服系统的实现方式有多种多样,这里介绍一种网上常见并且非常美观的客服系统,以此达到举一反三的目的,能够比较轻松的实现其他外观形式的客服系统,代码示例如下:CSSbody { margin:0px}。
    main_head { background:url(mytest/JS/img3-5_2。png) no-repeat;}*html 。main_head { filter:progid:DXImageTransform。
  Microsoft。AlphaImageLoader(src="mytest/JS/img3-5_2。  png", sizingMethod='crop'); background:none transparent scroll repeat 0% 0%;}* + html 。
  main_head { background:url(mytest/JS/img3-5_2。  png) no-repeat;}。info { padding-bottom:10px; padding-left:0px; padding-right:0px; background:url(mytest/JS/img3-5_3。
  png) repeat-y; padding-top:5px}* html 。  info { filter:progid:DXImageTransform。Microsoft。
  AlphaImageLoader(src="mytest/JS/img3-5_3。png", sizingMethod='crop'); background-repeat:repeat-y;}* + HTML 。
    info { padding-bottom:10px; padding-left:0px; padding-right:0px; background:url(mytest/JS/img3-5_3。
  png) repeat-y; padding-top:5px;}。  down_kefu { width:157px; background:url(mytest/JS/img3-5_4。
  png) no-repeat; height:8px}* html 。down_kefu { filter:progid:DXImageTransform。  Microsoft。
  AlphaImageLoader(src="mytest/JS/img3-5_4。png", sizingMethod='crop'); width:157px; background-repeat:repeat-y; height:8px}* + HTML 。
    down_kefu { width:157px; background:url(mytest/JS/img3-5_4。png) no-repeat; height:8px}。
  Obtn { margin-top:104px; width:32px; background:url(mytest/JS/img3-5_1。  png) no-repeat; float:left; height:139px; margin-left:-5px}* HTML 。
  Obtn { filter:progid:DXImageTransform。Microsoft。AlphaImageLoader(src="mytest/JS/img3-5_1。  png", sizingMethod='crop'); width:32px; background:none transparent scroll repeat 0% 0%; float:left; height:139px}* + html 。
  Obtn { margin-top:104px; width:32px; background:url(mytest/JS/img3-5_1。  png) no-repeat; float:left; height:139px; margin-left:-5px;}。
  qqtable span{ padding-bottom:5px; line-height:20px; padding-left:0px; width:100px; padding-right:0px; color:#ff6600; font-size:13px; font-weight:bold; padding-top: 5px}。
    qqtable a { text-decoration:none;}。qqtable a:hover { text-decoration: none}。qun { border-bottom:#ffd2bf 1px solid; border-left:#ffd2bf 1px solid; padding-bottom:5px; line-height:20px; background-color:#ffffff; padding-left:0px; width:100px; padding-right:0px; font-size:12px; border-top:#ffd2bf 1px solid; border-right:#ffd2bf 1px solid; padding-top:5px}。
    qun span { color:#ff6600; font-size:13px; font-weight:bold;}htmlqq:88888888 qq:88888888 会员交流群123456 商家交流群654321JS以上代码实现了我们想要的在网页一侧漂浮的客服系统。
    下面就简单介绍一下如何实现次效果:一。实现原理:将整个客服系统所在的softwhy对象设置为绝对定位,然后在默认状态下,将它的left属性值设置为一个恰当的负值,这样它主体部分就会被隐藏,只显示提示部分:默认状态下被隐藏的主体部分。
  默认状态下显示的提示部分。当鼠标放在放在提示部分(也就是放在softwhy对象)时候,通过调用相应的函数,使用setInterval()不断的加大left属性值来实现客服主体部分逐渐显示的效果。
    当鼠标离开softwhy对象的时候,再通过调用相应的函数,使用setInterval()不断的减少left属性值来实现客服主体部分的逐渐隐藏。softwhy对象top属性值在这里可能是个难点,它实现了当拖动滚动条的时候,客服系统具有比较任性的“弹性”的感觉,并且最终能够固定在距离窗口顶端100px的垂直位置上,此效果是结合a函数和setInterval(a,10+parseInt(Math。
    random()*20))实现的,这里简单介绍一下a函数的原理,主要是个数学问题:我们想要实现的效果就是无论怎么拖动滚动条,客服系统最终在垂直位置上距离窗口上边缘100px,也就是说只要将top属性值设置为d1。
  scrollTop或者d2。scrollTop与100px之和就可以了。  下面简单对a函数进行一下分析:Math。max(d1。scrollTop,d2。scrollTop)+_top-parseInt(me。
  style。top)中,Math。max(d1。scrollTop,d2。scrollTop)+_top就是me。style。  top的最终值,在通过使用setInterval()函数循环执行a函数,也就是不断的执行parseInt(me。
  style。top)+(Math。max(d1。scrollTop,d2。scrollTop)+_top-parseInt(me。style。top))*0。  1+'px',当me。
  style。top=Math。max(d1。scrollTop,d2。scrollTop)+_top的时候,客服系统也就是固定在指定的位置了。

类似问题换一批

热点推荐

热度TOP

相关推荐
加载中...

热点搜索 换一换

电脑/网络
电脑/网络
程序设计
电脑装机
操作系统/系统故障
硬件
笔记本电脑
百度
互联网
反病毒
软件
举报
举报原因(必选):
取消确定举报