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一章節。
相關文章
- 美觀開關按鈕程式碼例項
- css3實現的開關按鈕程式碼例項CSSS3
- javascript 點選回車相當於點選按鈕程式碼例項JavaScript
- CSS開關按鈕三例CSS
- 按鈕倒數計時可用效果例項程式碼
- 點選按鈕複製連結程式碼例項
- 滑鼠懸浮按鈕背景變色效果程式碼例項
- 點選按鈕複製文字框文字程式碼例項
- css3單選框、核取方塊和開關按鈕美化效果程式碼例項CSSS3
- 按鈕倒數計時指定秒數可用程式碼例項
- css自定義單選按鈕的樣式程式碼例項CSS
- css3實現button按鈕美化效果程式碼例項CSSS3
- 點選按鈕設定其背景顏色程式碼例項
- 點選按鈕顯示或者隱藏元素例項程式碼
- js點選按鈕數字加1效果程式碼例項JS
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- 微信隱藏網頁右上角按鈕js程式碼例項網頁JS
- js表單提交後提交按鈕不可點選程式碼例項JS
- 點選按鈕實現隱藏一個元素程式碼例項
- 點選按鈕拷貝複製元素內文字程式碼例項
- 點選刪除按鈕刪除當前行程式碼例項行程
- javascript物件導向相關程式碼例項JavaScript物件
- 防止表單提交按鈕重複點選現象程式碼例項
- javascript的for in例項程式碼JavaScript
- javascript關閉當前視窗例項程式碼JavaScript
- js按鈕點選後需要倒數計時才能可能用程式碼例項JS
- 點選按鈕實現文字框數字增加或者減少程式碼例項
- js獲取選中radio單選按鈕的值程式碼例項JS
- JavaScript in運算子程式碼例項JavaScript
- javascript操作xml程式碼例項JavaScriptXML
- JavaScript confirm() 程式碼例項JavaScript
- javascript Function()使用程式碼例項JavaScriptFunction
- JavaScript dom操作程式碼例項JavaScript
- javascript委託程式碼例項JavaScript
- javascript階乘程式碼例項JavaScript
- JavaScript 阻止事件冒泡程式碼例項JavaScript事件
- JavaScript取餘數程式碼例項JavaScript
- JavaScript獲取星期程式碼例項JavaScript