QQ漂浮的在线代码如何自定义样式

2019-04-13 QQ漂浮的在线代码如何自定义样式
QQ漂浮的在线代码如何自定义样式 在线状态生成见:http://b.qq.com/home_webpres.htm 共有四个风格,下面是修改风格样式的具体方法: 风格一和风格四: js内嵌代码如下,以750000174为例: <img  style="CURSOR: pointer" onclick="javascript:window.open('http://bizapp.qq.com/webc.htm?new=0&sid=750000174&o=b.qq.com&q=7', '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');"  border="0" SRC="[InstallDir_ChannelDir]{$UploadDir}/201011/20101105121026487.gif"> 简单修改:只需将img元素的粉红色的src的值改为用户自定义的图片url即可。 扩展修改:用户自定义wpa样式,只需在需要点击的方加入上述蓝色的onclick事件js代码即可。 风格二: 引用js界面相关代码如下: var urlroot = "http://im.bizapp.qq.com:8000/"; function kf_getPopupRightDivHtml(kfguin,reference, wpadomain) {   var temp = "";   temp += '<div class="wpa_popup" style="width:90px; height:150px;">';   temp += '<div style="width:8px; height:150px; float:left; background:url('+urlroot+'bg_1.gif);"></div>';   temp += '<div style="float:left; width:74px; height:150px; background:url('+urlroot+'middle.jpg); background-position: center;">';   temp += '<div ><h1 style="line-height:17px; font-size:14px; color:#FFF; margin:0px; padding:10px 0 13px 8px;"> </h1></div>';   temp += '<div style="height:83px; padding:0 0 0 2px; clear:both;"><div style="width:70px; height:70px; float:left; background:url('+urlroot+'face.jpg);"></div></div>';   temp += '<div style="clear:both;"><a href="#" onclick="kf_openChatWindow(0,\''+wpadomain+'\',\''+kfguin+'\')" style="width:69px; height:21px; background:url('+urlroot+'btn_2.gif); margin:0 0 0 2px; display:block;"></a></div></div>';   temp += '<div style="width:8px; height:150px; float:left; background:url('+urlroot+'bg_1.gif) right;"></div></div>';   return temp; } 简单修改: 1)下载http://im.bizapp.qq.com:8000/kf.js到用户服务器js目录。 2)将urlroot的地址改为用户存放图片的服务器地址 3)将上述粉红色的图片元素的src的值改为用户自定义的图片url即可(图片尺寸尽量与原图一致)。 bg_1.gif:背景圆角效果图片 middle.jpg:背景图片,图片包括在线客服文字 face.jpg:客服头像图片 bg_1.gif:下次再说按钮图片 bg_2.gif:QQ交谈按钮图片 扩展修改: 1)下载http://im.bizapp.qq.com:8000/kf.js到用户服务器js目录。 2)将urlroot的地址改为用户存放图片的服务器地址 3)自定义kf_getPopupRightDivHtml方法生成wpa样式,保证加入上述蓝色的onclick事件js代码即可。 风格三: 引用js界面相关代码如下: var urlroot = "http://im.bizapp.qq.com:8000/"; function kf_getPopupDivHtml(kfguin,reference,companyname,welcomeword, wpadomain) {    var temp = '';    temp += '<div style="float: left;height: 150px;width: 8px;background-image: url('+urlroot+'bg_1.gif);"></div>';    temp += '<div style="font-family: Tahoma;text-align:left;float: left;height: 150px;width: 324px;background-image: url('+urlroot+'bg_2.gif);background-repeat: repeat-x;">';    temp += '<div><h1 style=" float:left;font-size: 14px;color: #FFFFFF;margin: 0px;padding: 10px 0 13px 2px;line-height:17px;">'+companyname+'</h1><a href="#" onclick="kf_hidekfpopup();return false;" style="background-image: url('+urlroot+'close.gif);float: right;height: 19px;width: 42px;" onmouseover="javascript:this.style.backgroundPosition=\'bottom\'" onmouseleave="javascript:this.style.backgroundPosition=\'top\'"></a></div>';    temp += '<div style="height:83px;padding: 0 0 0 2px;clear:both;">';    temp += '<div style="background-image: url('+urlroot+'face.jpg);height: 70px;width: 70px;float:left;"></div>';    temp += '<p style="font-family:Tahoma;font-size:12px;line-height:24px;width: 240px;margin:0px;padding: 0 0 0 12px;display:block;float:left;margin-top:2px;word-wrap:break-word;">'+welcomeword+'</p></div>';    temp += '<div style="clear: both;">';    temp += '<a onclick="kf_hidekfpopup();return false;" href="#" style="float:right;background-image: url('+urlroot+'btn_1.gif);margin: 0 0 0 5px;padding: 0px;border:0px;height: 21px;width: 69px;"></a>';    temp += '<a onclick="kf_openChatWindow(1,\''+wpadomain+'\',\''+kfguin+'\')" href="#" style="float:right;background-image: url('+urlroot+'btn_2.gif);margin: 0px;padding: 0px;border:0px;height: 21px;width: 69px;"></a></div>';    temp += '</div><div style="float: left;height: 150px;width: 8px;background-image: url('+urlroot+'bg_1.gif);background-position: right;"></div>';    return temp; } 简单修改: 1)下载http://im.bizapp.qq.com:8000/kf.js到用户服务器js目录。 2)将urlroot的地址改为用户存放图片的服务器地址 3)将上述粉红色的图片元素的src的值改为用户自定义的图片url即可(图片尺寸尽量与原图一致)。 bg_1.gif:背景圆角效果图片 bg_2.gif:中间弹出窗口背景图片 middle.jpg:背景图片,图片包括在线客服文字 face.jpg:客服头像图片 bg_1.gif:下次再说按钮图片 bg_2.gif:QQ交谈按钮图片 close.gif:中间弹出窗口右上角关闭按钮图片 扩展修改: 1)下载http://im.bizapp.qq.com:8000/kf.js到用户服务器js目录。 2)将urlroot的地址改为用户存放图片的服务器地址 3)自定义kf_getPopupDivHtml