<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body{background-color: #dedede;margin: 60% 35%;padding: 0;}
.btn-change{
width: 100px;
height: 40px;
border-radius: 20px;
border: 1px solid #dedede;
font-size: 1.3em;
right: 4%;
position: relative;
overflow: hidden;
}
.btn-dot{
height: 40px;
width: 40px;
background-color: #dedede;
border-radius: 20px;
position: absolute;
z-index: 99;
}
.btn-left{
background-color:#74B700;
position: absolute;
width: 90px;
height: 40px;
line-height: 40px;
left: -70px;
color: #fff;
text-align: left;
padding-left: 30px;
}
.btn-move{position: absolute;}
.btn-right{
background-color: #ebebeb;
position: absolute;
width: 80px;
height: 40px;
line-height: 40px;
text-align: left;
padding-left: 20px;
left: 20px;
color: #333;
}
</style>
<link rel="stylesheet" href="usercss/changebtn.css">
<script src="jquery-1.10.2.js"></script>
<body>
<div class="btn-change" data-switch="false">
<div class="btn-move">
<div class="btn-left">关注</div>
<div class="btn-dot"></div>
<div class="btn-right">未关注</div>
</div>
</div>
</body>
</html>
<script>
$(function(){
$(".btn-change").click(function(){
var switch1=$(this);
var flag=switch1.attr("data-switch");
if(flag=="false")
{
switch1.find(".btn-move").animate({ "left": "60px" }, 500);
switch1.attr("data-switch","true");
}else{
switch1.find(".btn-move").animate({ "left": "0" }, 500);
switch1.attr("data-switch","false");
}
})
})
</script>
效果图：
时间： 2024-12-12 19:47:46