javascript开关按钮代码实例
分类：实例代码
本章节分享一段代码实例，它实现了开关按钮的效果。
当然在实际应用中，效果一边会更绚丽一些，不过这里只是简单介绍实现原理，要粗糙很多。
不过实现原理基本是这样的，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
#div1{
width:170px;
height:100px;
border-radius:50px;
position:relative;
}
#div2{
width:96px;
height:96px;
border-radius:48px;
position:absolute;
background:white;
box-shadow:0px 2px 4px rgba(0,0,0,0.4);
}
.open1{
background:rgba(0,184,0,0.8);
}
.open2{
top:2px;
right:1px;
}
.close1{
background:rgba(255,255,255,0.4);
border:3px solid rgba(0,0,0,0.15);
border-left:transparent;
}
.close2{
left:0px;
top:0px;
border:2px solid rgba(0,0,0,0.1);
}
</style>
<script>
window.onload=function(){
var div2=document.getElementById("div2");
var div1=document.getElementById("div1");
div2.onclick=function(){
div1.className=(div1.className=="close1")?"open1":"close1";
div2.className=(div2.className=="close2")?"open2":"close2";
}
}
</script>
</head>
<body>
<div id="div1" class="open1">
<div id="div2" class="open2"></div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面简单介绍一下它的实现过程。
一.实现原理:
实现原理非常的简单，在默认状态下，开关是打开的。
这个时候内部的div生效的class属性值是open2，背景色是绿色的，外部的div生效的class属性值是open1。
当点击的时候内部div位置会发生移动，这是因为此元素采用的是绝对定位，外部的div是采用的相对定位，于是就可以参考外部div进行定位操作了。原理就是如此简单，更多内容可以参阅相关阅读。
二.相关阅读:
（1）.className属性可以参阅js className一章节。
（2）.box-shadow可以参阅CSS3 box-shadow一章节。
（3）.rgba可以参阅CSS3 RGBA一章节。
