网站地图    收藏   

子栏目

主页 > 前端 > javascript >

javascript悬浮在线QQ客服代码分享

来源：自学PHP网    时间：2014-09-19 14:47 作者： 阅读:次

[导读] 一款javascript悬浮在线QQ客服代码分享,固定在右边跟随用户页面滚动页滚动的效果代码，里面有很多使用了js输入了，你可以利用在线js转换html来处理。...

效果代码

悬浮在线QQ客服代码分享

js代码

 代码如下 复制代码

<!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> 悬浮在线QQ客服代码分享</title>
<meta name="description" content=" 悬浮在线QQ客服代码分享。" />
<meta name="keywords" content=" 悬浮在线QQ客服代码分享" />
<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;}
/* 整体 */

#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/1_04.jpg);}
#nav li{ float:left;background:url(../images/1_06.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/1_05.jpg); color:#fff;}
#nav li a.hover{background:url(../images/1_05.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:726px; padding:1px;border:#ded7d1 solid 1px; margin-bottom:10px;}
#lbt{float:left; width:726px;background:url(../images/1_11.jpg); height:38px;}
.str{ float:left; width:93px;background:url(../images/1_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/1_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:1200px; 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" >期货配资</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"><img src="http://wpa.qq.com/pa?p=2:996994358:41" border="0" alt="点击这里给我发消息" /></a></span></td>");
document.writeln("      </tr>");
document.writeln("      <tr>");
document.writeln("        <td height="60" align="center" >开户咨询</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"><img src="http://wpa.qq.com/pa?p=2:1317234451:41" border="0" alt="点击这里给我发消息"></a></td>");
document.writeln("      </tr>");
document.writeln("      <tr>");
document.writeln("        <td height="60" align="center" >股指验资</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"><img src="http://wpa.qq.com/pa?p=2:123968516:41" border="0" alt="点击这里给我发消息"></a></td>");
document.writeln("      </tr>");
document.writeln("      <tr>");
document.writeln("        <td height="65" align="center" >代客理财</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"><img src="http://wpa.qq.com/pa?p=2:1511336277:41" border="0" alt="点击这里给我发消息"></a></td>");
document.writeln("      </tr>");
document.writeln("      <tr>");
document.writeln("        <td height="65" align="center" >技术指导</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"><img src="http://wpa.qq.com/pa?p=2:871011036:41" border="0" alt="点击这里给我发消息"></a></td>");
document.writeln("      </tr>");
document.writeln("      <tr>");
document.writeln("        <td height="65" align="center" valign="middle" ><p>套利套保</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"><img src="http://wpa.qq.com/pa?p=2:21863039:41" border="0" alt="点击这里给我发消息"></a></td>");
document.writeln("      </tr>");
document.writeln("      <tr>");
document.writeln("        <td height="20" colspan="2" align="center" >全国免费热线</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.documentElement : 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>

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论