애니메이션 기능 구현을 위한 jQuery 개발 QQ 고객 서비스 튜토리얼

jQuery를 먼저 사용하는 경우 다음 파일을 가져와 <head></head> 태그

div에 애니메이션 효과를 추가하세요. 코드와 설명은 다음과 같습니다.

<script>

//초기화 플래그 표시되거나 숨겨진 상태를 저장하는 데 사용되는 값입니다.

var flag=1;

$(document).ready(function(){

//클릭 추가 id=rightArrow

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

//플래그가 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');

//플래그를 0으로 설정

flag=0;

}else{

//플래그가 1이 아닌 경우 id=floatDivBoxs를 사용하여 div에 맞춤 애니메이션을 추가합니다. 애니메이션 시간은 300밀리초

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

//현재 바인딩 이벤트의 id=rightArrow를 사용하여 div에 맞춤 애니메이션을 추가합니다

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

//미리 바인딩된 이벤트의 id=rightArrow를 사용하여 div의 배경 이미지 시작 위치를 설정합니다

$(this) .css('배경 위치','0px 0');

플래그=1;

}

});

</script> ;

;div id="rightArrow"> ;<a href="#" title="Online Customer"></a></div>수정:<div id="rightArrow"> ;<a href="javascript:;" title ="Online Customer"></a></div>

여기서 href="javascript:;"는 javascript: 의사 프로토콜입니다. , 링크를 통해 javascript 함수를 호출할 수 있습니다. 그리고 이 방법을 사용하면 페이지에 내용이 많고 스크롤 막대가 있는 경우 javascript:; 뛰어 다니지 않으면 사용자 경험이 더 좋아질 것입니다.

전체 코드는 다음과 같습니다.

<!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>

새로운 파일

<!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>

제출하다 코드 재설정

자동운전

전체 화면