在网页上制作一个UISwitch
作者:BerenCamlost
文章目录
绪论
- 苹果的开关按钮UISwitch(如下图所示)是一个非常棒的UI设计,很适合用于各种开关的场合。
- 下面我将演式如何用Javascript和jQuery制作一个UISwitch按钮,首先讲解JavaScript的制作方法。
1 利用JavaScript制作UISwitch
1.1 盒模型
首先根据盒模型的设计思路,我将开关按钮分成背景(以下称switchBase)和可以拨动的圆球(以下称switchThumb)两部分,HTML代码如下:
<div id="switchBase" class="switchBase" onclick="switchBox()">
<div id="switchThumb" class="switchThumb"></div>
</div>
我对外围的switchBase这个div加入了点击事件,鼠标点击之后会做出相应的动作,如让switchThumb改变位置,switchBase改变背景颜色等。
1.2 CSS样式
- 【注意】以下样式不太完美(因为本人的技术原因),小伙伴们可以根据需求修改。
- 【switchBase样式】:
.switchBase{
width: 53px;
height: 32px;
vertical-align: middle;
float: right;
border-radius: 16px;/*圆角半径设置为height的一半即可*/
border: 1px solid darkgray;
background-color: darkgray;/*这个背景在苹果中是白色,在这里我设置成了暗灰色*/
position: relative;
}
- 【switchThumb样式】:
.switchBase>.switchThumb{
margin: 1px;
width: 30px;
height: 30px;
vertical-align: middle;
/* float: left;*/
/* float: right; */
position: absolute;
left: 0;
/* right: 0; */
border-radius: 15px;
background-color: white;
box-shadow: 0 0 0.1625rem 0.0125rem gray;
}
- 可以看出,此时开关的状态是关闭状态,其样式如下图所示(忽略蓝绿色的背景颜色):
1.3 js代码
- 下面就是我们的重头戏——JavaScript代码。
- 【需求】:
- 要根据点击,切换switchThumb位置和switchBase的背景颜色,并且switchThumb的位置切换还要有动画效果,慢慢的移动过去
- 根据点击,切换开关的状态,并且给一个flag变量赋值,来表示目前开关的状态。
- 【js代码】:
var switch_num = -1;
function switchBox(){
switch_num = -switch_num;
var switchBase = document.getElementById("switchBase");
var switchThumb = document.getElementById("switchThumb");
if (switch_num == 1){
switchThumbMoveRight = setInterval(function(){
switchThumb.style.left = switchThumb.offsetLeft+1+"px";
if (switchThumb.offsetLeft >= (switchBase.offsetWidth-switchThumb.offsetWidth-2)){
clearInterval(switchThumbMoveRight);
}
},15);
switchBase.style.backgroundColor = "#00FF00";
switchBase.style.borderColor = "#00FF00";
}
else if (switch_num == -1){
switchThumbMoveLeft = setInterval(function(){
switchThumb.style.left = switchThumb.offsetLeft-2+"px";
if (switchThumb.offsetLeft <= 1){
clearInterval(switchThumbMoveLeft);
}
},10);
switchBase.style.backgroundColor = "darkgray";
switchBase.style.borderColor = "darkgray";
}
}
2 利用jQuery制作UISwitch
- 【注意】jQuery只是JavaScript的一个库,非常好用,所以在下面的说明中,HTML和CSS的代码和上面相同,我们利用jQuery的简单代码实现上述效果。
2.1 HTML和CSS代码再次粘贴在这里:
<div id="switchBase" class="switchBase" onclick="switchBox()">
<div id="switchThumb" class="switchThumb"></div>
</div>
.switchBase{
width: 53px;
height: 32px;
vertical-align: middle;
float: right;
border-radius: 16px;/*圆角半径设置为height的一半即可*/
border: 1px solid darkgray;
background-color: darkgray;/*这个背景在苹果中是白色,在这里我设置成了暗灰色*/
position: relative;
}
.switchBase>.switchThumb{
margin: 1px;
width: 30px;
height: 30px;
vertical-align: middle;
/* float: left;*/
/* float: right; */
position: absolute;
left: 0;
/* right: 0; */
border-radius: 15px;
background-color: white;
box-shadow: 0 0 0.1625rem 0.0125rem gray;
}
2.2 jQuery代码
思路和需求和上边的完全相同,但是代码减少了很多。
$(document).ready(function(){
var switch_num = false;
$("#switchBase").click(function(){
if(switch_num == false){
$("#switchThumb").animate({left:"21px"},"fast")
$("#switchBase").css({
"background-color":"#00ff00",
"border-color":"#00ff00"});
switch_num = true;
}
else{
$("#switchThumb").animate({left:"0"},"fast")
$("#switchBase").css({
"background-color":"darkgray",
"border-color":"darkgray"});
switch_num = false;
}
});
});