html如何加入浮动客服,css如何实现客服悬浮效果

5268f80b9b1e01f982625ef6fac83ca1.png

02f5e716d4ecc47ac3c2ec6cbc9aa3ae.png

我们首先来看一下效果图:

326aca8c67947012b9c33f3c51297e88.png

(推荐教程:CSS教程)

接着我们来看一下实例代码:

html

css.sideBar {

position:fixed;

right:-182px;

top:50px;

background-color:#ffffff;

border:#eea236 solid 1px;

transition:right 0.5s;

border:solid 1px red;

}

.sideBar:hover {

right:0;

}

.sideBar>div {

position:relative;

}

.sideBar .tips {

position:absolute;

height:120px;

line-height:25px;

background-color:#eea236;

width:40px;

left:-40px;

top:50px;

text-align:center;

box-sizing:border-box;

padding:10px 10px;

border-top-left-radius:5px;

border-bottom-left-radius:5px;

font-weight:bold;

color:#ffffff;

}

.sideBar .list {

padding:0;

list-style:none;

width:180px;

margin:0;

}

.sideBar .list>li {

padding:15px;

border-top:#eea236 dashed 1px;

}

.sideBar .list>li:hover {

background-color:#f0ad4e;

color:#ffffff;

}

.sideBar .list>li:first-child {

border-top:none;

}

相关视频教程推荐:css视频教程

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<STYLE> <!-- A.ssmItems:link {color:black;text-decoration:none; padding-left:6px;} A.ssmItems:hover {color:black;text-decoration:none;padding-left:6px;} A.ssmItems:active {color:black;text-decoration:none;padding-left:6px;} A.ssmItems:visited {color:black;text-decoration:none;padding-left:6px;} --> </STYLE> <SCRIPT> NS6 = (document.getElementById && !document.all) IE = (document.all) NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4") tempBar='';barBuilt=0;ssmItems=new Array(); moving=setTimeout('null',1) function moveOut() { if ((NS6||NS) && parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) { clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)} else {clearTimeout(moving);moving=setTimeout('null',1)}}; function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)} function moveBack1() { if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) { clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)} else {clearTimeout(moving);moving=setTimeout('null',1)}} function slideMenu(num){ if (IE) {ssm.pixelLeft += num;} if (NS||NS6) {ssm.left = parseInt(ssm.left)+num;} if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;}} function makeStatic() { if (NS||NS6) {winY = window.pageYOffset;} if (IE) {winY = document.documentElement.scrollTop+300;} if (NS6||IE||NS) { if (winY!=lastY && winY>YOffset-staticYOffset) { smooth = .2 * (winY - lastY - YOffset + staticYOffset);} else if (YOffset-staticYOffset+lastY>YOffset-staticYOffset) { smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));} else {smooth=0} if(smooth > 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (IE) bssm.pixelTop+=smooth; if (NS6||NS) bssm.top=parseInt(bssm.top)+smooth lastY = lastY+smooth; setTimeout('makeStatic()', 1)}} function buildBar() { if(barText.indexOf('<IMG')>-1) {tempBar=barText} else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+"<BR>"}} document.write('<td align="center" rowspan="100" width="'+barWidth+'" valign="'+barVAligns+'"><img src="'+barBGimg+'"></TD>')} function initSlide() { if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style; bssm.clip="rect(0 "+document.getElementById("thessm").offsetWidth+" "+document.getElementById("thessm").offsetHeight+" 0)";ssm.visibility="visible";} else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").style bssm.clip="rect(0 "+thessm.offsetWidth+" "+thessm.offsetHeight+" 0)";bssm.visibility = "visible";} else if (NS) {bssm=document.layers["basessm1"]; bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"]; bssm2.clip.left=0;ssm.visibility = "show";} if (menuIsStatic=="yes") makeStatic();} function buildMenu() { if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : '+XOffset+' ;Top : '+YOffset+' ;Z-Index : 20;width:'+(menuWidth+barWidth+10)+'"><DIV ID="thessm" style="Position : Absolute ;Left : '+(-menuWidth)+' ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS) {document.write('<LAYER name="basessm1" top="'+YOffset+'" LEFT='+XOffset+' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" left="'+(-menuWidth)+'" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="'+(menuWidth+barWidth+2)+'"><TR><TD>')} document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+barWidth+2)+'">'); for(i=0;i<ssmItems.length;i++) { if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1} else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1); if(ssmItems[i-1] && ssmItems[i-1][4]!="no"){document.write('<TR>')} if(!ssmItems[i][1]){ document.write('<td bgcolor="'+hdrBGColor+'" HEIGHT="'+hdrHeight+'" align="'+barVAlign+'" ALIGN="'+hdrAlign+'" VALIGN="'+hdrVAlign+'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+ssmItems[i][0]+'</b></font></td>')} else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget; document.write('<TD BGCOLOR="'+linkBGColor+'" HEIGHT="'+hdrHeights+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="'+ssmItems[i][5]+'" COLSPAN="'+ssmItems[i][3]+'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%" ALIGN="'+linkAlign+'"><DIV ALIGN="'+linkAlign+'"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+ssmItems[i][1]+'" target="'+ssmItems[i][2]+'" CLASS="ssmItems">'+ssmItems[i][0]+'</DIV></LAYER></ILAYER></TD>')} if(ssmItems[i][4]!="no" && barBuilt==0){buildBar();barBuilt=1} if(ssmItems[i][4]!="no"){document.write('</TR>')}} document.write('</table>') if (NS6){document.write('</TD></TR></TABLE>')} if (IE||NS6) {document.write('</DIV></DIV>')} if (NS) {document.write('</LAYER></ILAYER></LAYER>')} theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)} </SCRIPT> <SCRIPT> YOffset=150; // no quotes!! XOffset=0; staticYOffset=30; // no quotes!! slideSpeed=20 // no quotes!! waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it. menuBGColor="ffffff"; menuIsStatic="yes"; //this sets whether menu should stay static on the screen menuWidth=150; // Must be a multiple of 10! no quotes!! menuCols=2; hdrFontFamily="verdana"; hdrFontSize="2"; hdrFontColor="white"; hdrBGColor="#B6E7C9"; hdrAlign="left"; hdrVAlign="center"; hdrHeight="25"; linkFontFamily="Verdana"; linkFontSize="2"; linkBGColor="#F4FBF7"; linkOverBGColor="#FFFF99"; linkTarget="_top"; linkAlign="Left"; barBGColor="#444444"; barBGimg="/edu/img/js/q.gif "; barFontFamily="Verdana"; barFontSize="2"; hdrHeights="22"; barVAlign="center"; barVAligns="top" barWidth=24; // no quotes!! barText=""; // <IMG> tag supported. Put exact html for an image to show. /////////////////////////// // ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header ssmItems[0]=[" QQ客服"] //create header ssmItems[1]=["<img src=/edu/img/js/q.gif border=0/> 111111111", "#", ""] ssmItems[2]=["<img src=/edu/img/js/q.gif border=0/> 222222222", "#",""] ssmItems[3]=["<img src=/edu/img/js/q.gif border=0/> 333333333", "#", ""] ssmItems[4]=["<img src=/edu/img/js/q.gif border=0/> 444444444", "#", "_blank"] ssmItems[5]=["<img src=/edu/img/js/q.gif border=0/> 555555555", "#", ""] ssmItems[6]=["<img src=/edu/img/js/q.gif border=0/> 666666666", "#", ""] ssmItems[7]=[" 电话客服", "", ""] //create header ssmItems[8]=["<img src=/edu/img/js/q.gif border=0/> 111111111", "#", ""] ssmItems[9]=["<img src=/edu/img/js/q.gif border=0/> 222222222", "#", ""] ssmItems[10]=["<img src=/edu/img/js/q.gif border=0/> 333333333", "#", ""] buildMenu(); moveBack(); </SCRIPT>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值