关于分别使用CSS3和JQ制作IOS7开关按钮的方法

来源：互联网发布：周易参同契知乎编辑：程序博客网时间：2024/04/28 02:58

以下的两个demo实现的效果如图：

开始：点击按钮后：，再次点击恢复。

1.利用纯css实现：

<!doctype html><html><head><style type="text/css">.ios input{display: none; /*使得复选框之前的小框不可见*/}.ios i{display: block;cursor: pointer; /*手型鼠标*/width: 50px;height: 25px;border-radius: 25px;border:1px solid #d2d0d0;transition: all 0.2s; /*加个过渡效果好看一点，不加也没关系*/}.ios i:before{display: block;content: '';width: 25px;height: 25px;border-radius: 25px;border:1px solid #d2d0d0;background-color: #fff;}.ios input:checked + i{width: 25px;padding-left: 25px;background-color: #23f823;}</style></head><body><label class="ios"><input type="checkbox" checked="checked" /><i></i></label></body></html>

2.利用jquery实现：

<!doctype html><html><head><style type="text/css">i{cursor: pointer;}.ios{cursor: pointer;width: 50px;height: 25px;border-radius: 25px;border:1px solid #d2d0d0;background-color: #23f823;}.btn{display: block;width: 25px;height: 25px;margin-left: 25px;border-radius: 25px;border:1px solid #d2d0d0;background-color: #fff;position: relative;}.ios2{cursor: pointer;width: 50px;height: 25px;border-radius: 25px;border:1px solid #d2d0d0;background-color: #fff;}.btn2{display: block;width: 25px;height: 25px;margin-left: 0;border-radius: 25px;border:1px solid #d2d0d0;background-color: #fff;position: relative;}</style><script src="jquery.min.js"></script><script type="text/javascript">$(function(){$("i").click(function(){$("div").toggleClass("ios2"); /*切换class*/$("i").toggleClass("btn2"); /*切换class*/});})</script></head><body><div class="ios"><i class="btn"></i></div></body></html>

0 0