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