jQuery開發(fā)QQ客服教程之實現(xiàn)動畫功能
首先使用jQuery的話，我們需要先引入下面的文件放在<head></head>標簽中
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
給div添加動畫效果，代碼及注釋如下：
<script>
//初始化flag的值，用于存儲顯示或者隱藏的狀態(tài)
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);
//設(shè)置前綁定事件的id=rightArrow的div的背景圖片的起始位置
$(this).css('background-position','-50px 0');
//將flag設(shè)置為0
flag=0;
}else{
//當flag不為1的時候，給id=floatDivBoxs的div添加一個自定義動畫，動畫時間300毫秒
$("#floatDivBoxs").animate({right: '0'},300);
//給當前綁定事件的id=rightArrow的div添加一個自定義動畫
$(this).animate({right: '170px'},300);
//設(shè)置前綁定事件的id=rightArrow的div的背景圖片的起始位置
$(this).css('background-position','0px 0');
flag=1;
}
});
});
</script>
將<div id="rightArrow"><a href="#" title="在線客戶"></a></div>修改為<div id="rightArrow"><a href="javascript:;" title="在線客戶"></a></div>
這里的href="javascript:;"，其中javascript:是偽協(xié)議，它可以讓我們通過一個鏈接來調(diào)用javascript函數(shù).而采用這個方式 javascript:;可以實現(xiàn)<a>標簽的點擊事件運行時，如果頁面內(nèi)容很多，有滾動條時，頁面不會亂跳，用戶體驗更好。
完整代碼如下：
<!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;}
/*根據(jù)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的值，用于存儲顯示或者隱藏的狀態(tài)
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);
//設(shè)置前綁定事件的id=rightArrow的div的背景圖片的起始位置
$(this).css('background-position','-50px 0');
//將flag設(shè)置為0
flag=0;
}else{
//當flag不為1的時候，給id=floatDivBoxs的div添加一個自定義動畫，動畫時間300毫秒
$("#floatDivBoxs").animate({right: '0'},300);
//給當前綁定事件的id=rightArrow的div添加一個自定義動畫
$(this).animate({right: '170px'},300);
//設(shè)置前綁定事件的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>
