jQuery를 사용하여 슬라이딩 버튼 스위치를 구현하는 방법-JS 튜토리얼-php.cn

jQuery를 사용하여 슬라이딩 버튼 스위치를 구현하는 방법

不言

풀어 주다： 2018-06-25 16:20:39

원래의

3583명이 탐색했습니다.

이 기사에서는 슬라이딩 버튼 스위치 효과를 얻기 위한 jquery 코드를 공유합니다. 코드는 간단하고 이해하기 쉽고, 매우 훌륭하며, 필요한 친구가 참조할 수 있습니다. 모든 주요 웹사이트에서 슬라이딩 스위치 버튼을 볼 수 있습니다. 관심 있는 친구들은 구현 코드를 참조할 수 있는 jquery 기반 슬라이딩 버튼 스위치 효과에 대한 기사를 공유하겠습니다.

먼저 렌더링을 보여드리겠습니다:

코드:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>jquery做的滑动按钮开关</title> 
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css"/> 
</head> 
<style> 
.switch{ 
width: 100px; 
margin: 100px 0px 0 100px; 
} 
.btn_fath{ 
margin-top: 10px; 
position: relative; 
border-radius: 20px; 
} 
.btn1{ 
float: left; 
} 
.btn2{ 
float: right; 
} 
.btnSwitch{ 
height: 40px; 
width: 50px; 
border:none; 
color: #fff; 
line-height: 40px; 
font-size: 16px; 
text-align: center; 
z-index: 1; 
} 
.move{ 
z-index: 100; 
width: 40px; 
border-radius: 20px; 
height: 40px; 
position: absolute; 
cursor: pointer; 
border: 1px solid #828282; 
background-color: #f1eff0; 
box-shadow: 1px 2px 2px 1px #fff inset,0 0 5px 1px #999; 
} 
.on .move{ 
left: 60px; 
} 
.on.btn_fath{ 
background-color: #5281cd; 
} 
.off.btn_fath{ 
background-color: #828282; 
} 
</style> 
<body> 
<p class="switch"> 
<p class="btn_fath clearfix on" onclick="toogle(this)"> 
<p class="move" data-state="on"></p> 
<p class="btnSwitch btn1">ON</p> 
<p class="btnSwitch btn2 ">OFF</p> 
</p> 
<p class="btn_fath clearfix off" onclick="toogle(this)"> 
<p class="move" data-state="off"></p> 
<p class="btnSwitch btn1">ON</p> 
<p class="btnSwitch btn2 ">OFF</p> 
</p> 
</p> 
<script type="text/javascript" src="jquery/jquery.min.js"></script> 
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script> 
<script type="text/javascript"> 
function toogle(th){ 
var ele = $(th).children(".move"); 
if(ele.attr("data-state") == "on"){ 
ele.animate({left: "0"}, 300, function(){ 
ele.attr("data-state", "off"); 
alert("关！"); 
}); 
$(th).removeClass("on").addClass("off"); 
}else if(ele.attr("data-state") == "off"){ 
ele.animate({left: &#39;60px&#39;}, 300, function(){ 
$(this).attr("data-state", "on"); 
alert("开！"); 
}); 
$(th).removeClass("off").addClass("on"); 
} 
} 
</script> 
</body> 
</html>

로그인 후 복사

주의해야 할 점: 1. 일정한 속도. 선형 속도가 없습니다. CSS3의 용이함과 같은 선형 움직임이 있는지 찾아보세요.

2. 애니메이트 메소드의 콜백 함수는 운동이 끝난 후 호출되는 함수입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!