jQuery development QQ customer service tutorial to implement animation function
To use jQuery first, we need to introduce the following file and place it in the <head></head> tag
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
Add animation effects to div, the code and comments are as follows:
<script>
//Initialize the value of flag, used to store the displayed or hidden state
var flag=1;
$(document).ready(function(){
//id=rightArrow Add a click event to the div
$("#rightArrow").click(function(){
//When flag is 1 When, add a custom animation to the div with id=floatDivBoxs, the animation time is 300 milliseconds
if(flag==1){
$("#floatDivBoxs").animate({right: '-175px'},300);
//Add a div with the id=rightArrow of the current binding event Custom animation
$(this).animate({right: '-5px'},300);
//Before setting The starting position of the background image of the div with the id=rightArrow of the binding event
$(this).css('background-position','-50px 0');
//Set flag to 0
flag=0;
}else{
//When flag is not 1, add a custom animation to the div with id=floatDivBoxs, the animation time is 300 milliseconds
$( "#floatDivBoxs").animate({right: '0'},300);
//Add a custom animation to the div with id=rightArrow of the current binding event
$(this).animate({right: '170px'},300);
//Set the id of the pre-bound event =The starting position of the background image of the div of rightArrow
$(this).css('background-position','0px 0');
flag=1;
}
});
## }) ;
##</script>Change<div id="rightArrow"><a href="#" title ="Online Customer"></a></div>Change to<div id="rightArrow"><a href="javascript:;" title="Online Customer"></ a></div>
The href="javascript:;" here, where javascript: is a pseudo-protocol, which allows us to call javascript functions through a link. In this way javascript :; When the click event of the <a> tag is running, if the page contains a lot of content and there is a scroll bar, the page will not jump around and the user experience will be better.
The complete code is as follows:
<!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(https://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="https://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="https://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="https://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>