A very practical QQ online customer serviceCodeClick the QQ icon to directly contact customer service. The specific implementation code is as follows:
HTML page:
<! 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"> 435027 | customer service 05 "// Separate multiple QQ accounts with commas (,), and separate QQ and customer service names with commas (| });}) </SCRIPT>
CSS style:
/* Default blue */. sonlinebox {width: 162px; font-size: 12px; overflow: hidden; Z-index: 9999 ;}. sonlinebox. opentrigger {width: 30px; Height: 110px; position: absolute; top: 0px; Z-index: 1; cursor: pointer; Background: # 0176ba URL (.. /images/opentrigger.jpg) No-Repeat ;}. sonlinebox. titlebox {width: 158px; Height: 35px; line-Height: 35px; Background: # 038bdc URL (.. /images/sonlinetitlebg.gif) Repeat-X; border-bottom: 2px solid # 0176ba ;}. sonlinebox. titlebox span {margin-left: 10px; color: # FFF; font-size: 14px; font-family: '',' ';}. sonlinebox. contentbox {width: 158px; Height: auto; Border: 2px solid # 0176ba; Background: # FFF; position: absolute; Z-index: 2 ;}. sonlinebox. contentbox. closetrigger {width: 25px; Height: 25px; display: block; cursor: pointer; position: absolute; top: 5px; Right: 5px;-WebKit-transition: all 0.8 s outgoing-out ;}. sonlinebox. contentbox. closetrigger: hover {-WebKit-transform: Scale (1) rotate (360deg );}. sonlinebox. contentbox. listBox {overflow: hidden; margin-bottom: 10px ;}. sonlinebox. contentbox. listBox. qqlist {display: block; width: 86%; Height: 22px; margin: 10px auto 0px auto ;}. sonlinebox. contentbox. listBox. qqlist span {float: Left; line-Height: 22px ;}. sonlinebox. contentbox. listBox. qqlist A {float: Left ;}Jquery script code:
/* This plug-in is based on the jquery developer yaohucaiziblog: http://blog.csdn.net/yaohucaizi/#/ (function ($) {$. FN. sonline = function (options) {var opts = $. extend ({}, $. FN. sonline. defualts, options); $. FN. setlist (OPTs); // call the list to set if (OPTs. defaultsopen = false) {$. FN. sonline. close (OPTs. position, 0);} // expand $ ("# sonlinebox>. opentrigger "). live ("click", function () {$. FN. sonline. open (OPTs. position) ;}); // close $ ("# sonlinebox>. contentbox>. clo Setrigger "). live ("click", function () {$. FN. sonline. close (OPTs. position, "fast") ;}); // if ($. browser. MSIE & ($. browser. version = "6.0 ")&&! $. Support. style | opts. effect = true) {$. FN. sonline. scrolltype ();} else if (OPTs. effect = false) {$ ("# sonlinebox" ).css ({position: "fixed"}) ;}// plugin defaults $. FN. sonline. defualts = {position: "Left", // left or righttop: 200, // The distance from the top. The default value is 200 pxeffect: True, // scroll or fixed. boolean value: true or defasosopen: True, // expand by default: True, shrink by default: falseqqlist: "" // separate multiple QQ with commas, separate QQ and customer service names with '|'} // expand $. FN. sonline. open = function (positiontype) {var widthvalue = $ ("# Sonlinebox>. contentbox "). width (); If (positiontype = "Left") {$ ("# sonlinebox>. contentbox "). animate ({left: 0}, "fast");} else if (positiontype = "right") {$ ("# sonlinebox>. contentbox "). animate ({right: 0}, "fast") ;}$ ("# sonlinebox" ).css ({width: widthvalue + 4}); $ ("# sonlinebox>. opentrigger "). hide ();} // close $. FN. sonline. close = function (positiontype, speed) {$ ("# sonlinebox>. opentrigger "). show (); var widthva Lue = $ ("# sonlinebox>. opentrigger "). width (); var allwidth = (-($ ("# sonlinebox>. contentbox "). width ()-6); If (positiontype = "Left") {$ ("# sonlinebox>. contentbox "). animate ({left: allwidth}, speed);} else if (positiontype = "right") {$ ("# sonlinebox>. contentbox "). animate ({right: allwidth}, speed) ;}$ ("# sonlinebox "). animate ({width: widthvalue}, speed);} // sub-plug-in: sets the list parameter $. FN. setlist = function (OPTs) {$ ("body "). append ("<Div class = 'linebox' id = 'linebox' style = 'top:-600px; '> <Div class = 'opentrigger' style = 'display: none 'title = 'expanded'> </div> <Div class = 'contentbox'> <Div class = 'closetrigger'> </div> <Div class = 'titlebox'> <span> Customer Service Center </span> </div> <Div class = 'listbox'> </Div> </div> "); if (OPTs. qqlist = "") {$ ("# sonlinebox>. contentbox>. listBox "). append ("<P style = 'paddi NG: 15px '> no online customer service is available. </P> ")} else {var qqlisthtml = $. FN. sonline. splitstr (OPTs); $ ("# sonlinebox>. contentbox>. listBox "). append (qqlisthtml);} If (OPTs. position = "Left") {$ ("# sonlinebox" ).css ({left: 0});} else if (OPTs. position = "right") {$ ("# sonlinebox" ).css ({right: 0})} $ ("# sonlinebox" ).css ({top: opts. top}); var allheights = 0; if ($ ("# sonlinebox>. contentbox "). height () <$ ("# sonlinebox>. opentrigger "). height () {allheights = $ ("# So Nlinebox>. opentrigger "). height () + 4;} else {allheights = $ ("# sonlinebox>. contentbox "). height () + 4 ;}$ ("# sonlinebox "). height (allheights); If (OPTs. position = "Left") {$ ("# sonlinebox>. opentrigger "cmd.css ({left: 0});} else if (OPTs. position = "right") {$ ("# sonlinebox>. opentrigger ").css ({right: 0}) ;}// sliding effect $. FN. sonline. scrolltype = function () {$ ("# sonlinebox" ).css ({position: "absolute"}); var topnum = parseint ($ ("# Sonlinebox" ).css ("TOP") + ""); $ (window ). scroll (function () {var scrolltopnum = $ (window ). scrolltop (); // get the height of the page to be rolled ("# sonlinebox "). stop (True, true ). delay (0 ). animate ({top: scrolltopnum + topnum}, "slow") ;}) ;}// QQ $. FN. sonline. splitstr = function (OPTs) {var STRs = new array (); // defines an array of VaR qqlisttext = opts. qqlist; STRs = qqlisttext. split (","); // character segmentation var qqhtml = "" For (VAR I = 0; I <STRs. length; I ++) {var substrs = new Array (); // defines an array var subqqlist = STRs [I]; substrs = subqqlist. split ("|"); // character segmentation qqhtml = qqhtml + "<Div class = 'qqlist'> <span>" + substrs [1] + ": </span> <a target = '_ blank' href = 'HTTP: // wpa.qq.com/msgrd? V = 3 & uin = "+ substrs [0] +" & Site = QQ & menu = Yes '> </a> </div> "} return qqhtml ;}) (jquery );As follows:
Download required materials: Download link
This article is original by yaohucaizi. If you need to reprint it, please indicate the source. All copyright infringement is required!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
