html滑动开关按钮实现

来源：互联网发布：淘宝小米没有碎屏险编辑：程序博客网时间：2024/05/19 02:29

实现代码：

<span style="font-family: Arial, Helvetica, sans-serif;"><html></span>

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>html滑动开关按钮</title><link href="switch-button.css" rel="stylesheet" ><script src="../jquery-2.1.1.min.js" type="text/javascript"></script><script src="switch-button.min.js" type="text/javascript"></script><script type="text/javascript">$(function(){

        //默认滑动按钮$.wendySwitch({selector:"input[id^='flag']",batchNo:"tu"});

        //自定义

$.wendySwitch({selector:".tt",   //选择器batchNo:"mySwitch", //批次号,用来区分一组开关align:"right", //默认竖向排列，横向排(left靠左，right靠右)backgroundColor:"#EE3B3B",   //开启时-开关背景色fontColor:"#C0FF3E",     //开启时-开关字体色borderColor:"#CD919E",     //开关边框颜色borderBottomColor:"#8B0000", //开关底边框背景色backgroundColor2:"#B4CDCD",   //关闭时-开关背景色fontColor2:"#242424",      //关闭时-开关字体色borderColor2:"#C1C1C1",      //关闭时边框颜色borderBottomColor2:"#6B6B6B", //关闭时-开关底边框背景色btnBorderColor:"#8FBC8F",    //按钮边框颜色btnBackgroundColor:"#EE7942" //按钮背景色});});</script></head><body><input id="flag1" type="checkbox" ><input id="flag2" type="checkbox" open-txt="开启" close-txt="关闭" checked><input id="flag3" type="checkbox" open-txt="启用" close-txt="禁用" checked><input id="flag4" type="checkbox" open-txt="简单" close-txt="困难" ><input id="flag5" type="checkbox" open-txt="简单的" close-txt="困难的" switch-css="switch-middle" checked><input id="flag6" type="checkbox" open-txt="漂亮的人" close-txt="丑陋的人" switch-css="switch-large" ><input class="tt" name="flag1" type="checkbox" ><input class="tt" name="flag1" type="checkbox" open-txt="开启" close-txt="关闭" checked><input class="tt" name="flag2" type="checkbox" open-txt="启用" close-txt="禁用" checked><input class="tt" name="flag3" type="checkbox" open-txt="简单" close-txt="困难" ><input class="tt" name="flag3" type="checkbox" open-txt="简单的" close-txt="困难的" switch-css="switch-middle" checked><input class="tt" name="flag3" type="checkbox" open-txt="漂亮的人" close-txt="丑陋的人" switch-css="switch-large" ></body></html>

效果截图：

1 0