Javascript floating online QQ customer service code sharing

Source: Internet
Author: User

A javascript floating online QQ customer service code sharing, fixed on the right side following the user page scroll page of the Results code, which uses a lot of js input, you can use online js to convert html for processing.

Effect code

Js Code

The Code is as follows: Copy code

<! 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>
<Meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7"/>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GB2312"/>
<Title> floating online QQ customer service code sharing </title>
<Meta name = "description" content = "floating online QQ customer service code sharing. "/>
<Meta name = "keywords" content = "floating online QQ customer service code sharing"/>
<Style>
/* CSS Document */
* {Margin: 0; padding: 0 ;}
Img {border: 0 ;}
Body {margin: 0 auto; background: # fff; font-family: Arial, Helvetica, sans-serif, "";}
Body, td, th {font-size: 12px; color: #533b34; line-height: 20px ;}
A {color: #533b34; text-decoration: none ;}
A: hover {color: red ;}
/* Hover {color: #803227 ;}*/
. Clear {clear: both ;}
Ul {list-style-type: none ;}
/* Overall */

# Frame {margin: 0 auto; width: 960px ;}
# Top {float: left; width: 960px; padding-top: 6px; padding-bottom: 8px ;}
. Log {float: left ;}
. Tr {float: right; width: 360px; padding-top: 6px; text-align: right ;}
# Sform {float: right; width: 200px; height: 26px ;}
# Stext {float: left; width: 170px; height: 22px; line-height: 22px; background: 0; border: # dfdfdf solid 1px ;}
# Sbut {float: right; width: 24px; background: url (../images/1_02.jpg); height: 24px; border: 0 ;}
. Tel {float: left; width: 360px; padding-top: 8px; font-size: 14px ;}
. Tel img {float: left; padding-right: 8px; padding-top: 3px; padding-left: 2px ;}

# Nav {float: left; width: 960px; background: url (../images/42404.jpg );}
# Nav li {float: left; background: url (../images/11206.jpg) no-repeat top right; padding-right: 2px; line-height: 36px ;}
# Nav li a {display: block; padding-left: 23px; padding-right: 23px; background: url (.. /images/1_04.jpg); line-height: 36px; color: # fff ;}
# Nav li a: hover {background: url (../images/10905.jpg); color: # fff ;}
# Nav li a. hover {background: url (../images/10905.jpg); color: # fff ;}

# Bar {float: left; width: 960px; padding-top: 10px; padding-bottom: 10px ;}
. Btp {float: left; border: # ded7d1 solid 1px ;}
. Btp img {float: left ;}
. Bnr {float: right; width: 214px; padding: 2px; border: # ded7d1 solid 1px; padding-bottom: 7px ;}
. Ban {float: left; width: 198px; padding-bottom: 0px ;}
. Ban a {float: left; padding: 5px ;}
. Bnr ul {float: left; width: 200px; padding: 7px; padding-top: 0px ;}
. Bnr li {float: left; width: 200px; background: url (../images/1_09.jpg) no-repeat left ;}
. Bnr li a {padding-left: 20px; line-height: 24px ;}

# News {float: left; width: 920px; background: url (../images/1_10.jpg); padding-left: 40px; height: 40px; line-height: 30px ;}
# Main {float: left; width: 960px; padding-top: 10px ;}
# Left {float: left; width: 730px ;}
# Lmb {float: left; width: pixel PX; padding: 1px; border: # ded7d1 solid 1px; margin-bottom: 10px ;}
# Lbt {float: left; width: pixel; background: url (../images/1_11.jpg); height: 38px ;}
. Str {float: left; width: 93px; background: url (.. /images 12.jpg) no-repeat top right; height: 25px; text-align: center; line-height: 25px; font-size: 14px; margin-top: 13px; padding-left: 15px ;}
# Lnr {float: left; width: 706px; padding: 10px; min-height: 499px ;}
# Lnr p {float: left; line-height: 20px; margin-bottom:-20px; padding: 0px ;}
# Lnrindex {float: left; width: 706px; padding: 10px ;}
. Pmk {float: left; width: 130px; height: 130px; padding-left: 20px; padding-right: 25px ;}
. Ys {color: #803227 ;}
. Pt {float: left; padding-left: 20px ;}
. Pz {float: left; width: 130px; padding-top: 10px ;}

# Qhmb {float: left; width: 356px; padding: 1px; border: # ded7d1 solid 1px; margin-bottom: 10px ;}
# Qbt {float: left; width: 356px; background: url (../images/1_11.jpg); height: 38px ;}
# Qnr {float: left; width: 336px; padding: 10px ;}
. Qwz {float: left; width: 336px; padding-bottom: 12px ;}
. Qtp {float: left ;}
. Qz {float: right; width: 178px; padding-top: 6px ;}
. Qz strong {float: left; width: 178px; padding-bottom: 8px ;}
. Qz p {float: left; width: 178px ;}
# Qnr ul {float: left; width: 336px ;}
# Qnr li {float: left; width: 336px; line-height: 24px ;}
# Qnr li a {float: left; background: 0 8px url (../images/1_14.jpg) no-repeat; padding-left: 15px; color: #666 ;}
# Qnr li a: hover {color: #803227 ;}
. Sj {float: right; color: #803227; font-size: 10px ;}

. Awz {float: left; width: 336px; border-bottom: # ded7d1 solid 1px; padding-bottom: 10px; padding-top: 2px; margin-bottom: 14px ;}
. Atp {float: left; border: # ded7d1 solid 1px; padding: 1px ;}
. Az {float: right; width: 230px ;}
. Az strong {float: left; width: 230px; padding-bottom: 8px ;}
. Az p {float: left; width: 230px ;}
. Amore {float: right; padding-bottom: 6px ;}


# Right {float: right; width: 220px ;}
# Cmb {float: left; width: 216px; padding: 1px; border: # ded7d1 solid 1px; margin-bottom: 10px ;}
# Cbt {float: left; width: 216px; background: url (../images/1_11.jpg); height: 38px ;}
# Cnr {float: left; width: 196px; padding: 10px ;}
# Cnr ul {float: left; width: 196px ;}
# Cnr li {float: left; width: 196px; line-height: 24px ;}
# Cnr li a {float: left; background: 0 8px url (../images/1_14.jpg) no-repeat; padding-left: 15px; color: #666 ;}
# Cnr li a: hover {color: #803227 ;}
# Cform {float: right; width: 196px; height: 26px; padding-top: 14px; padding-bottom: 7px ;}
# Ctext {float: left; width: 128px; height: 22px; line-height: 22px; background: 0; border: # ded7d1 solid 1px ;}
# Cbut {float: right; width: 62px; background: url (../images/1_18.jpg); height: 24px; border: 0 ;}
. Cwz {float: left; width: 196px; border-bottom: # ded7d1 solid 1px; padding-bottom: 10px; padding-top: 8px; margin-bottom: 14px ;}
. Ctp {float: left; border: # ded7d1 solid 1px; padding: 1px ;}
. Cz {float: right; width: 100px ;}
. Cz strong {float: left; width: 100px; padding-bottom: 8px ;}
. Cz p {float: left; width: 100px ;}

# Hzhb {float: left; width: 956px; padding: 1px; border: # ded7d1 solid 1px; margin-bottom: 10px ;}
# Hbt {float: left; width: 956px; background: url (../images/Hangzhou 11.jpg); height: 38px ;}
# Hnr {float: left; width: 936px; padding: 15px 10px ;}
# Hnr img {float: left; border: # ededed solid 1px; margin-left: 2px; margin-right: 10px ;}

# Foot {float: left; width: 960px; padding-top: 10px; padding-bottom: 10px; border-top: # e0dad4 solid 1px; border-bottom: # e0dad4 solid 1px; margin-bottom: 10px ;}
. Fl {float: left; width: 530px; line-height: 24px ;}
. Fl img {float: left; padding-right: 15px ;}
. Fr {float: right ;}

# Cnav {float: left; width: 216px; padd
</Style>
 
</Head>
<Body>
<Div style = "height: pixel PX; text-align: center; padding: 500px 0;">

 
</Div>
<Script type = "text/javascript">
Document. writeln ("<div id =" divStayTopLeft "style =" position: absolute; right: 0; font-size: 12px "> ");
Document. writeln ("<div id =" adv "style =" float: right; width: 162px; top: 10px; right: 30px; position: absolute; background-image: url (images/qqline.gif); border-bottom: solid 1px # eaeaea; "> ");
Document. writeln ("<table cellpadding =" 0 "cellspacing =" 0 "style =" float: left; width: 150px; "> ");
Document. writeln ("<tr> ");
Document. writeln ("<td colspan =" 2 "style =" text-align: left; line-height: 30px; padding-left: 20px; "> & nbsp; </td> ");
Document. writeln ("</tr> ");
Document. writeln ("<tr> ");
Document. writeln ("<td colspan =" 2 "> & nbsp; </td> ");
Document. writeln ("</tr> ");
Document. writeln ("<tr> ");
Document. writeln ("<td height =" 60 "align =" center "> Futures Fund allocation </td> ");
Document. writeln ("<td align =" center "> <span style =" width: 50%; text-align: center; "> <a target =" _ blank "href =" http://wpa.qq.com/msgrd? V = 3 & amp; uin = 996994358 & amp; site = qq & amp; menu = yes "> </a> </span> </td> ");
Document. writeln ("</tr> ");
Document. writeln ("<tr> ");
Document. writeln ("<td height =" 60 "align =" center "> account opening consultation </td> ");
Document. writeln ("<td style =" width: 50%; text-align: center; "> <a target =" _ blank "href =" http://wpa.qq.com/msgrd? V = 3 & uin = 1317234451 & site = qq & menu = yes "> </a> </td> ");
Document. writeln ("</tr> ");
Document. writeln ("<tr> ");
Document. writeln ("<td height =" 60 "align =" center "> stock index capital verification </td> ");
Document. writeln ("<td style =" width: 50%; text-align: center; "> <a target =" _ blank "href =" http://wpa.qq.com/msgrd? V = 3 & uin = 123968516 & site = qq & menu = yes "> </a> </td> ");
Document. writeln ("</tr> ");
Document. writeln ("<tr> ");
Document. writeln ("<td height =" 65 "align =" center "> Financial proxy </td> ");
Document. writeln ("<td style =" width: 50%; text-align: center; "> <a target =" _ blank "href =" http://wpa.qq.com/msgrd? V = 3 & uin = 1511336277 & site = qq & menu = yes "> </a> </td> ");
Document. writeln ("</tr> ");
Document. writeln ("<tr> ");
Document. writeln ("<td height =" 65 "align =" center "> technical guidance </td> ");
Document. writeln ("<td style =" width: 50%; text-align: center; "> <a target =" _ blank "href =" http://wpa.qq.com/msgrd? V = 3 & uin = 871011036 & site = qq & menu = yes "> </a> </td> ");
Document. writeln ("</tr> ");
Document. writeln ("<tr> ");
Document. writeln ("<td height =" 65 "align =" center "valign =" middle "> <p> arbitrage hedging </p> </td> ");
Document. writeln ("<td style =" width: 50%; text-align: center; "> <a target =" _ blank "href =" http://wpa.qq.com/msgrd? V = 3 & uin = 21863039 & site = qq & menu = yes "> </a> </td> ");
Document. writeln ("</tr> ");
Document. writeln ("<tr> ");
Document. writeln ("<td height =" 20 "colspan =" 2 "align =" center "> National free hotline </td> ");
Document. writeln ("</tr> ");
Document. writeln ("<tr> ");
Document. writeln ("<td colspan =" 2 "align =" center "> 400-079-8880 </td> ");
Document. writeln ("</tr> ");
Document. writeln ("<tr> ");
Document. writeln ("<td colspan =" 2 "align =" center "> 021-60547777 </td> ");
Document. writeln ("</tr> ");
Document. writeln ("</table> ");
Document. writeln ("</div> ");
Document. writeln ("</div> ");

Var w3c = (document. getElementById )? True: false;
Var agt = navigator. userAgent. toLowerCase ();
Var ie = (agt. indexOf ("msie ")! =-1) & (agt. indexOf ("opera") =-1) & (agt. indexOf ("omniweb") =-1 ));
Var mymovey = new Number ();
Function IeTrueBody (){
Return (document. compatMode & document. compatMode! = "BackCompat ")? Document.doc umentElement: document. body ;}
Function GetScrollTop (){
Return ie? IeTrueBody (). scrollTop: window. pageYOffset ;}
Function heartBeat (){
DiffY = GetScrollTop ();
Mymovey + = Math. floor (diffY-document.getElementById ('divstaytopleft'). style. top. replace ("px", "") + 50) * 0.1 );
Document. getElementById ('divstaytopleft'). style. top = mymovey + "px ";}
Function hiddenDiv (){
Document. getElementById ('divstaytopleft'). style. display = "none ";}
Window. setInterval ("heartBeat ()", 1 );
</Script>
</Body>
</Html>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.