返回在线客服+样式...登陆

在线客服+样式

Ai蓝胖子2019-06-21 10:07:3688

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 

 <meta name="format-detection" content="telephone=no" /> 

<title>QQ客服</title>

<style>

/* 公共样式定义 */

*{padding:0;margin:0;}

html,body{font-size:12px;font-family:"宋体";outline:none;color:#666;background:#fff;}

ul,ol{list-style:none;}

img{border:none;outline:none;}

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

a:hover{color:#e8431f;}

/*根据class或者id值定义样式*/

body{height:3000px;}

#floatDivBoxs{width:170px;background:#fff;position:fixed;top:100px;right:0;z-index:999;}

#floatDivBoxs .floatDtt{width:100%;height:45px;line-height:45px; background:#f08326;color:#fff;font-size:18px;text-indent:22px;position:relative;}

#floatDivBoxs .floatDqq{padding:0 14px;}

#floatDivBoxs .floatDqq li{height:45px;line-height:45px;font-size:15px;border-bottom:1px solid #e3e3e3;padding-left:0px;}

#floatDivBoxs .floatDtxt{font-size:18px;color:#333;padding:12px 14px;}

.floatShadow{ background:#fff;box-shadow:-2px 0 3px rgba(0,0,0,0.25);}

#rightArrow{width:50px;height:45px;background:url(http://img.php.cn//upload/image/380/320/544/1478308842480674.jpg) no-repeat;position:fixed;top:100px;right:170px;z-index:999;}

#rightArrow a{display:block;height:45px;}

</style>

<!-- 引入jQuery文件 -->

<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>

<script>

//初始化flag的值,用于存储显示或者隐藏的状态

var flag=1;

$(document).ready(function(){

//id=rightArrow的div添加一个click事件

$("#rightArrow").click(function(){

//当flag为1的时候,给id=floatDivBoxs的div添加一个自定义动画,动画时间300毫秒

if(flag==1){

$("#floatDivBoxs").animate({right: '-175px'},300);

//给当前绑定事件的id=rightArrow的div添加一个自定义动画

$(this).animate({right: '-5px'},300);

//设置前绑定事件的id=rightArrow的div的背景图片的起始位置

$(this).css('background-position','-50px 0');

//将flag设置为0

flag=0;

}else{

//当flag不为1的时候,给id=floatDivBoxs的div添加一个自定义动画,动画时间300毫秒

$("#floatDivBoxs").animate({right: '0'},300);

//给当前绑定事件的id=rightArrow的div添加一个自定义动画

$(this).animate({right: '170px'},300);

//设置前绑定事件的id=rightArrow的div的背景图片的起始位置

$(this).css('background-position','0px 0');

flag=1;

}

});

});

</script>

</head>

<body>

<div id="rightArrow"><a href="javascript:;" title="在线客户"></a></div>

<div id="floatDivBoxs">

 <div class="floatDtt">在线客服</div>

 <div class="floatShadow">

 <ul class="floatDqq">

 <li ><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="http://img.php.cn//upload/image/477/494/683/1478309332960894.png" > 在线客服1</a></li>

 <li ><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="http://img.php.cn//upload/image/477/494/683/1478309332960894.png" > 在线客服2</a></li>

 <li ><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="http://img.php.cn//upload/image/477/494/683/1478309332960894.png" > 在线客服3</a></li>

 </ul>

 <div class="floatDtxt">热线电话<br/>0551-123456789</div>

 </div>

</div>

</body>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网