オンライン カスタマー サービス システムは、多くの Web サイト、特に販売 Web サイトで使用されており、Web サイトの可用性を効果的に高め、顧客がタイムリーに販売者に連絡できるようにすることで、取引が成功する可能性を高めます。オンライン カスタマー サービス システムには次のような方式があります。ここでは、一例から推測し、他の形式の実装を容易にするという目的を達成するために、インターネット上の一般的で非常に美しいカスタマー サービス システムを紹介します。カスタマー サービス システムのコード例は次のとおりです:
CSS
<style type="text/css"> body { 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; } </style>
html
<div id="softwhy"> <table style="float:left" border="0" cellspacing="0" cellpadding="0" width="157"> <tbody> <tr> <td class="main_head" height="39" valign="top"> </td> </tr> <tr> <td class="info" valign="top"> <table class="qqtable" border="0" cellspacing="0" cellpadding="0" width="120" align="center"> <tbody> <tr> <td align=middle><a href="#" target="_blank"><img border=0 src="mytest/JS/kefu_head.gif"></a></td> </tr> <tr> <td height=5></td> </tr> <tr> <td height=30 align=middle><span>qq:88888888</span></td> </tr> <tr> <td height=30 align=middle><span>qq:88888888</span></td> </tr> <tr> <td height=5></td> </tr> <tr> <td height=35 valign=top align=middle><a href="#" target="_blank"><img border=0 src="mytest/JS/img3-5-btn1.gif" width=90 height=25></a></td> </tr> <tr> <td height=38 valign=top align=middle><a href="#" target="_blank"><img border=0 src="mytest/JS/img3-5-btn2.gif" width=90 height=25></a></td> </tr> <tr> <td align=middle><div class=qun><font color=#9b9b9b>会员交流群</font><br><span>123456</span></div></td> </tr> <tr> <td align=middle><div class=qun><font color=#9b9b9b>商家交流群</font><br><span>654321</span></div></td> </tr> <tr> <td align=middle> </td> </tr> </tbody> </table> </td> </tr> <tr> <td class="down_kefu" valign="top"></td> </tr> </tbody> </table> <div class="Obtn"></div> </div> <div style="height:1000px;"></div>
JS
<script type="text/javascript"> kefu=function(id,_top,_left){ var me=document.getElementById(id); var d1=document.body; var d2=document.documentElement; d1.style.height=d2.style.height='100%'; me.style.top=_top+'px'; me.style.left=_left+"px"; me.style.position='absolute'; function a() { me.style.top=parseInt(me.style.top)+(Math.max(d1.scrollTop,d2.scrollTop)+_top-parseInt(me.style.top))*0.1+'px'; } setInterval(a,10+parseInt(Math.random()*20)); } window.onload=function(){ kefu('softwhy',100,-152) } </script> <script type="text/javascript"> var InterTime=1; var maxWidth=-1; var minWidth=-152; var numInter=10; var BigInter; var SmallInter; var o=document.getElementById("softwhy"); var i=parseInt(o.style.left); function Big() { if(parseInt(o.style.left)<maxWidth) { i=parseInt(o.style.left); i+= numInter; o.style.left=i+"px"; if(i==maxWidth) clearInterval(BigInter); } } function toBig() { clearInterval(SmallInter); BigInter=setInterval(Big,InterTime); } function Small() { if(parseInt(o.style.left)>minWidth) { i=parseInt(o.style.left); i=i-numInter; o.style.left=i+"px"; if(i==minWidth) clearInterval(SmallInter); } } function toSmall() { clearInterval(BigInter); SmallInter=setInterval(Small,InterTime); } </script>
上記のコードは、Web ページの横にフローティングする顧客サービス システムを実装しています。この効果を実現する方法を簡単に紹介します:
1. 実装原則:
カスタマーサービスシステム全体が配置されているsoftwhyオブジェクトを絶対位置に設定し、その左属性値をデフォルトで適切な負の値に設定します。これにより、メイン部分が非表示になり、プロンプト部分のみが表示されます。 :
ボディ部分はデフォルトでは非表示になっています。
デフォルトで表示されるプロンプトセクション。
マウスがプロンプト部分 (つまり、softwhy オブジェクト上) に置かれると、対応する関数が呼び出され、setInterval() を使用して left 属性値が継続的に増加し、メイン部分が徐々に表示される効果が得られます。顧客サービスの。マウスがsoftwhyオブジェクトから離れると、対応する関数が呼び出され、setInterval()を使用して左の属性値を継続的に減らし、顧客サービスの主要部分を徐々に非表示にします。
ここでは、softwhy オブジェクトの top 属性の値が問題になる可能性があります。これにより、顧客サービス システムがスクロール バーをドラッグする際に、より意図的な「弾力性」を持たせることができ、最終的には垂直位置 100 ピクセルに固定できます。ウィンドウの上部から、この効果は a 関数と setInterval(a,10 parseInt(Math.random()*20)) を組み合わせることによって実現されます。これは a 関数の原理を簡単に紹介します。主に数学の問題:
私たちが達成したい効果は、スクロール バーがどのようにドラッグされても、顧客サービス システムが垂直位置でウィンドウの上端から 100 ピクセル離れたところにあるということです。 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() 関数を使用してループ内で関数を実行する、つまり 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 の場合、顧客サービス システムは指定された位置に固定されます。
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。