图片效果如下:
具体代码先晒出来:
View Code
<!-- qq online Begin --> < div id ="divStay" style ="position: absolute; background: #FFF; width: 110px" > < table cellspacing ="0" cellpadding ="0" width ="100%" border ="0" bgcolor ="#FFFFFF" > < tbody > < tr > < td valign ="bottom" width ="7%" > </ td > </ tr > </ tbody > </ table > </ div > < script type ="text/javascript" > function picsize(obj, MaxWidth) { img = new Image(); img.src = obj.src; if (img.width > MaxWidth) { return MaxWidth; } else { return img.width; } } function CloseQQ() { divStayTopRight.style.display = " none " ; return true ; } var online = new Array(); </ script > < div id ="divStayTopRight" style ="position: absolute" > < table cellspacing ="0" cellpadding ="0" width ="109" border ="0" > < tbody > < tr > < td height ="34" colspan ="3" style ="padding: 0px; margin: 0px; padding: 0px;" > < a onclick ="CloseQQ()" href ="javascript:;" shape ="circle" coords ="91,16,12" > < img height ="34" src ="qq_img/qq_top.gif" width ="109" style ="vertical-align: top; padding: 0px; display: block;" usemap ="#Map" border ="0" alt ="51Aspx" /></ a > </ td > </ tr > < tr > < td width ="6" height ="172" background ="qq_img/qq_life.gif" > </ td > < td valign ="top" width ="98" > < table width ="93" height ="156" border ="0" align ="center" cellpadding ="0" cellspacing ="0" bgcolor ="White" > < tbody > < tr > < td height ="30" colspan ="2" > < table cellspacing ="0" cellpadding ="0" width ="90" border ="0" > < tbody > < tr > < td style ="color: #000" > < img src ="qq_img/qq_ico1.gif" alt ="在线咨询" width ="16" height ="13" /> </ td > < td style ="color: #000" > 客户服务 </ td > </ tr > </ tbody > </ table > </ td > </ tr > < tr > < td height ="27" colspan ="2" align ="center" > < img style ="cursor: pointer" onclick ="javascript:window.open('http://b.qq.com/webc.htm?new=0&sid=516735965&eid=2188z8p8p8p8Q8P8z8q8x&o=51yyx.com&q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" border ="0" src ="http://im.bizapp.qq.com:8000/zx_qq.gif" alt ="客户咨询服务" > </ td > </ tr > < tr > < td colspan ="2" > </ td > </ tr > < tr > < td width ="16" height ="31" > < img src ="qq_img/qq_ico1.gif" alt ="销售咨询" width ="16" height ="13" /> </ td > < td width ="74" style ="color: #000" > 服务咨询 </ td > </ tr > < tr > < td height ="25" colspan ="2" align ="center" > < img style ="cursor: pointer" onclick ="javascript:window.open('http://b.qq.com/webc.htm?new=0&sid=516735965&eid=2188z8p8p8p8Q8P8z8q8x&o=51yyx.com&q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');" border ="0" src ="http://im.bizapp.qq.com:8000/zx_qq.gif" alt ="业务咨询专员" > </ td > </ tr > < tr > < td height ="25" colspan ="2" align ="center" > < a target ="_blank" href ="http://wpa.qq.com/msgrd?v=3&uin=1223690082&site=51yyx&menu=yes" > < img border ="0" src ="http://wpa.qq.com/pa?p=2:1223690082:41" alt ="售前专员1号" /></ a > </ td > </ tr > < tr > < td height ="25" colspan ="2" align ="center" > < a target ="_blank" href ="http://wpa.qq.com/msgrd?v=3&uin=923678258&site=51yyx&menu=yes" > < img border ="0" src ="http://wpa.qq.com/pa?p=2:923678258:41" alt ="售前专员2号" /></ a > </ td > </ tr > < tr > < td height ="25" colspan ="2" align ="center" > < a target ="_blank" href ="http://wpa.qq.com/msgrd?v=3&uin=527142502&site=51yyx&menu=yes" > < img border ="0" src ="http://wpa.qq.com/pa?p=2:527142502:41" alt ="咨询&合作专员" /></ a > </ td > </ tr > < tr > < td height ="25" colspan ="2" align ="center" > < a target ="_blank" href ="http://amos.im.alisoft.com/getcid.aw?v=3&uid=流星宅男&site=cntaobao&groupid=223213&s=1&charset=gbk" > < img border ="0" src ="http://amos.im.alisoft.com/grponline.aw?v=3&uid=流星宅男&site=cntaobao&gids=223213&s=1" alt ="客户服务" /></ a > </ td > </ tr > < tr > < td colspan ="2" align ="center" > < a target ="_blank" href ="http://amos.im.alisoft.com/getcid.aw?v=3&uid=nnbct11&site=cntaobao&groupid=223226&s=1&charset=gbk" > < img border ="0" src ="http://amos.im.alisoft.com/grponline.aw?v=3&uid=nnbct11&site=cntaobao&gids=223226&s=1" alt ="售前咨询" border ="0" style ="padding-bottom: 0; margin-bottom: 0;" /></ a > </ td > </ tr > < tr > < td colspan ="2" > </ td > </ tr > </ tbody > </ table > </ td > < td width ="7" height ="172" background ="qq_img/qq_right.gif" > </ td > </ tr > < tr > < td colspan ="3" style ="padding: 0px; margin: 0px; padding: 0px;" > < img height ="37" alt ="400咨询电话" src ="qq_img/qq_bottom1.gif" width ="109" style ="vertical-align: top; padding: 0px; display: block;" /> </ td > </ tr > < tr > < td colspan ="3" style ="padding: 0px; margin: 0px; padding: 0px;" > < img src ="qq_img/qq_logo.gif" alt ="只收市话费" style ="vertical-align: top; padding: 0px; display: block;" width ="109" height ="33" /> </ td > </ tr > </ tbody > </ table > </ div > < script type ="text/javascript" language ="javascript" charset ="gb2312" src ="qq_img/floatQQ.js" ></ script > <!-- qq online End -->
注意:默认是靠左边浮动的,如果要像右边浮动,修改floatQQ.js,中left和right对调
o.style.cssText += ";position:" + (p.f && !ie6 ? 'fixed' : 'absolute') + ";" + (p.l == undefined ? 'left:0;' : 'right:' + p.l + 'px;') + (p.t != undefined ? 'top:' + p.t + 'px' : 'bottom:0');
点击提供下载: