javascript開關按鈕程式碼例項

antzone發表於2017-04-05
原文網址 : https://www.softwhy.com/article-5906-1.html
JavaScript

本章節分享一段程式碼例項，它實現了開關按鈕的效果。

當然在實際應用中，效果一邊會更絢麗一些，不過這裡只是簡單介紹實現原理，要粗糙很多。

不過實現原理基本是這樣的，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<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一章節。

相關文章