jQuery和css3实现的开关效果代码实例
分类:实例代码
分享一段代码实例,它模拟实现了开关按钮效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> .openOne { width: 100px; height: 50px; border-radius: 25px; position: relative; background: rgba(0,184,0,0.8); transition: all .3s ease-in-out; } .openOne span { line-height: 50px; color: #fff; padding-left: 15px; font-family: "微软雅黑"; font-size: 14px; } .openTwo { width: 50px; height: 50px; border-radius: 25px; position: absolute; box-shadow: 0px 2px 4px rgba(0,0,0,0.4); background: #fff; top: 0px; left: 50px; cursor: pointer; transition: left .3s ease-in-out; } .box.active .openOne { box-shadow: 0px 0px 4px rgba(0,0,0,0.4); background: #fff; } .box.active .openTwo { left: 0px; } .box.active .openOne span { color: #666; padding-left: 55px; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(function () { var bl = true; $('.box').click(function () { $('.box').toggleClass('active'); if(bl==true){ $('.openOne span').text('开启'); bl = false; }else{ $('.openOne span').text('关闭'); bl = true; } }); }) </script> </head> <body> <div class="box"> <div class="openOne"> <span>关闭</span> <div class="openTwo"></div> </div> </div> </body> </html>
上面的代码实现了我们的要求,更多内容可以参阅相关阅读。
相关阅读:
(1).border-radius可以参阅CSS3 border-radius一章节。
(2).transition可以参阅CSS3 transition一章节。
(3).box-shadow可以参阅CSS3 box-shadow一章节。
(4).toggleClass可以参阅jQuery toggleClass()一章节。
jQuery和css3实现的开关效果代码实例,这样的场景在实际项目中还是用的比较多的,关于jQuery和css3实现的开关效果代码实例就介绍到这了。
jQuery和css3实现的开关效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。