个人修改的QQ客服代码

原创 Crik 随笔 jQuery 2524阅读 2014-08-26 22:46:19 举报

[list=1]
[]Html结构[code]<!-- 942850532可以改成你的QQ号码 -->
<div id = "qq-service">
<dl>
<dt class = "IE6PNG"></dt>
<dd class = "qq-service-qq"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=942850532&site=qq&menu=yes"; alt="点击这里给我发消息" title="点击这里给我发消息"></a></dd>
<dd class = "qq-service-tel"><a href="javascript:void(0);"></a></dd>
</dl>
</div>
<!--[if IE 6]><script type="text/javascript" src="common/js/IE6PNG.js"></script>
<script type="text/javascript">PNGmin.fix(".IE6PNG");</script><![endif]-->[/code]
[
]jQuery代码(简单来说,就是一个hover方法)[code]$(window).load(function(){

    /*核心代码*/
    var QQ_Online = $('#qq-service');
    QQ_Online.hover(function(){
            $(this).stop(true,false).animate({width: 160}, 400); 
    },function(){
            $(this).stop(true,fasle).animate({width: 40}, 400);        
    });

});[/code]
[]CSS代码[code]/

重置样式

*/
dl,dt,dd{margin:0;padding:0;list-style:none;}

/*

QQ客服

*/

qq-service {width:40px;height:198px;position:fixed;top:200px;right:0;overflow:hidden;z-index:9999;}

qq-service dl {width:120px;height:198px;border-radius:25px 0 0 25px;padding-left:40px;box-shadow:0 0 5px #e4e8ec;}

qq-service dl dt {position:absolute;top:0;left:0;width:40px;height:198px;background:url("../images/qq_service.png");cursor:pointer;}

qq-service dl dd{background:#fff}

qq-service dl dd a{width:120px;height:85px;display:block;overflow:hidden;background-image:url("../images/qq_service.png");background-repeat:no-repeat}

qq-service dl dd.qq-service-qq a { background-position:-40px 0;}

qq-service dl dd.qq-service-tel{border-top:1px solid #e4e8ec;}

qq-service dl dd.qq-service-tel a {height:112px;background-position:-40px -86px}

  • html #qq-service {position:absolute;left:expression(eval(document.documentElement.scrollRight));top:expression(eval(document.documentElement.scrollTop+200))}[/code]

原代码本来好几百行,因为集成了很多其他代码,方便大家也方便自己!!!!希望大家会喜欢!!修改的初衷是因为客户的界面很不错,我觉得蛮喜欢,其次就是QQ客服本来的是比较难用,不太方便!!!(代码中的base.js,只是一个集成jQuery1.9.1与及其它jQuery插件所组成的库,可以改为其它jQuery库,这完全没问题),有什么问题可以回帖的哦!------------->效果是这样的:3ecd859e768f93982ca9d8411099f979在线下载地址:##http://url.cn/PgAy73

[/list]

论坛朋友反映插件响应太快,代码已修改!!!!!!谢谢各位

评论 ( 8 )
最新评论
yjzgwhh163 5F 2014-09-13 16:49:14 8F

  

Crik 5F 2014-09-06 22:37:10 7F

都不打算发。。。。。下一次一定要发一些有技术含量的文章!!!!!

Crik 2014-09-06 22:36:29 6F

已经重新分享了!!感想回复!!http://url.cn/PgAy73

痴xin尘封 2014-09-05 09:11:01 5F

楼主好厉害!

yjzgwhh163 2014-09-03 08:59:58 4F

外链次数已用完

houguang 2014-08-28 08:13:12 3F

楼主反应挺快啊。都修改了。

r517 2014-08-28 00:56:11 2F

    

houguang 2014-08-27 14:19:27 1F

一个大bug