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一章节。

javascript开关按钮代码实例

回复

我来回复
  • 暂无回复内容