Das Beispiel in diesem Artikel beschreibt den von jQuery implementierten Online-Kundendienst-Effektcode auf der linken Seite der Webseite. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein weiterer Online-Kundendienstcode auf einer Webseite. Sie können ihn verwenden. Was unterscheidet es von anderen Kundendienstdiensten? Es ist nichts weiter als das Ausschieben auf der linken Seite der Webseite, um Kundendiensttypen zu gruppieren. Es hat eine andere Funktion, haha.
Der Screenshot des Laufeffekts sieht wie folgt aus:
Die Online-Demo-Adresse lautet wie folgt:
http://demo.jb51.net/js/2015/jquery-left-online-kf-demo/
Der spezifische Code lautet wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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 0 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=12345678&&Site=www.cdn.net&&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li> <li>网站建设<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li> <li>网站优化<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li> <li>整合营销<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></a></li> <li>售后服务<a target="_blank" href="tencent://message/?uin=12345678&&Site=www.cdn.net&&Menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=1:12345678:42"></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>
Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der jQuery-Programmierung befassen.