Bootstarp风格的toggle效果分享

2019-11-20 10:31:48

字体：大中小

来源：转载

供稿：网友

最近在写项目的时候想要一个这样的效果，

我知道这个效果在 flat-ui中有，但是我又不想引用一整个flat-ui;

　　这个效果依赖html5的transition，所以浏览器兼容成问题；

　　从flat-ui中把这个效果的js和html，以及css给拨离出来；

　　整体的代码如下：

运行下面代码

<!DOCTYPE html><html><head><meta charset="utf-8"/><title></title></head><body><h1>toggle的demo</h1><style>.toggle {background-color: #8AB9E3;border-radius: 60px;color: white;height: 29px;margin: 5px 12px 12px 0;overflow: hidden;*zoom: 1;display: inline-block;zoom: 1;*display: inline;-webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;-webkit-backface-visibility: hidden;-webkit-box-sizing: initial}.toggle:before, .toggle:after {display: table;content: "";}.toggle:after {clear: both;}.toggle.toggle-off {background-color: #cbd2d8;}.toggle.toggle-off .toggle-radio {/*background-image: url("../images/icon-off.png")*/;background-position: 0 0;color: white;left: 0;margin-left: 0.5px;margin-right: -13px;z-index: 1;}.toggle.toggle-off .toggle-radio:first-child {left: -120%;}.toggle .toggle-radio {/*background: url("../images/icon-on.png") right top no-repeat;*/color: #0275d8;display: block;font-weight: 700;height: 21px;left: 120%;margin-left: -13px;padding: 5px 32px 3px;position: relative;text-align: center;z-index: 2;-webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;-webkit-backface-visibility: hidden;}.toggle .toggle-radio:first-child {margin-bottom: -29px;left: 0;}.toggle input {display: none;position: absolute;outline: none !important;display: block/9;opacity: 0.01;filter: alpha(opacity=1);zoom: 1;}.toggle.toggle-icon {border-radius: 6px 7px 7px 6px;}.toggle.toggle-icon.toggle-off {border-radius: 7px 6px 6px 7px;}.toggle.toggle-icon.toggle-off .toggle-radio {/*background-image: url("../images/block-off.png");*/background-position: 0 0;}.toggle.toggle-icon .toggle-radio {/*background-image: url("../images/block-on.png");*/background-position: 62px 0;border-radius: 6px;min-width: 27px;text-align: right;}.toggle.toggle-icon .toggle-radio:first-child {text-align: left;}</style><div class="toggle pull-left"><label class="toggle-radio" for="toggleOption2">ON</label><input type="radio" name="toggleOptions" id="toggleOption1" value="option1" checked="checked"><label class="toggle-radio" for="toggleOption1">OFF</label><input type="radio" name="toggleOptions" id="toggleOption2" value="option2"></div><script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.js"></script><script>//toggle插件的js代码var toggleHandler = function(toggle) {var toggle = toggle;var radio = $(toggle).find("input");var checkToggleState = function() {if (radio.eq(0).is(":checked")) {$(toggle).removeClass("toggle-off");} else {$(toggle).addClass("toggle-off");}};checkToggleState();radio.eq(0).click(function() {$(toggle).toggleClass("toggle-off");});radio.eq(1).click(function() {$(toggle).toggleClass("toggle-off");});};$(".toggle").each(function(index, toggle) {toggleHandler(toggle);});</script></body></html>

整体的效果是依赖于jQuery，当用户点击了label按钮会触发input的click事件，然后判断给父级添加不同的classname；

上一篇：理解Javascript图片预加载

下一篇：javascript瀑布流式图片懒加载实例解析与优化