이 기사에서는 슬라이딩 버튼 스위치 효과를 얻기 위한 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: '60px'}, 300, function(){ $(this).attr("data-state", "on"); alert("开!"); }); $(th).removeClass("off").addClass("on"); } } </script> </body> </html>
주의해야 할 점: 1. 일정한 속도. 선형 속도가 없습니다. CSS3의 용이함과 같은 선형 움직임이 있는지 찾아보세요.
2. 애니메이트 메소드의 콜백 함수는 운동이 끝난 후 호출되는 함수입니다.
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
jQuery 및 CSS3 접이식 카드 드롭다운 목록 상자 효과 달성 jQuery 슬라이딩 페이지의 고정 상단 표시 기능 구현위 내용은 jQuery를 사용하여 슬라이딩 버튼 스위치를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!