网页右侧支持语音效果的在线客服代码

网页右侧支持语音效果的在线客服代码

新建html文档。

准备好需要用到的图标。

书写hmtl代码。

书写css代码。

*{padding:0;margin:0}

a{color:#555;text-decoration:none;outline:none}

a:hover{color:#3fa9f5}

a{blr:expression(this.onFocus=this.blur())}

ul{list-style:none}

h4,h3,h2,h1{font-weight:normal}

img{border:none}

html, body{font:14px/24px "微软雅黑 Light", "微软雅黑",arial,sans-serif;color:#666;min-width:1000px;background:#f2f2f2}

/*客服按钮*/

#service{margin-top:-200px;position:fixed; _position:absolute;right:0;top:50%;width:56px;height:400px;filter:alpha(opacity=90);-moz-opacity:0.9;-khtml-opacity: 0.9;opacity: 0.9;}

#service a{display:block;width:56px;height:100px;text-indent:-9999px;background:url(../images/service.png) no-repeat;cursor:pointer;margin-bottom:1px}

#service a.mscBtn{height:50px;background:#fff url(../images/musicBtn.gif) no-repeat}

#service a.goTop{height:50px;width:56px;background-position:0 bottom}

#service a.goTop:hover{background-position:-56px bottom}

#service a.pause{background-position:0 bottom}

#service .srvLog{}

#service .srvLog:hover{background-position:-56px 0}

#service .srvCns{background-position:0 -100px}

#service .srvCns:hover{background-position:-56px -100px}

#service .srvDj{background-position:0 -200px}

#service .srvDj:hover{background-position:-56px -200px}

书写并添加js代码。

代码整体结构。

查看效果。