jQuery开关按钮特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery开关按钮特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Better Check Boxes with jQuery and CSS | Tutorialzine Demo</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzCheckbox/jquery.tzCheckbox.css" />
</head>
<body>
<div id="page">
	<form method="get" action="./">
    	<ul>
    		<li><label for="ch_effects">Display effects: </label><input type="checkbox" id="ch_effects" name="ch_effects" data-on="Show effects" data-off="Hide effects" /></li>
        	<li><label for="ch_location">Enable location tracking: </label><input type="checkbox" id="ch_location" name="ch_location" checked /></li>
	        <li><label for="ch_showsearch">Include me in search results: </label><input type="checkbox" id="ch_showsearch" name="ch_showsearch" /></li>
	        <li><label for="ch_emails">Email notifications: </label><input type="checkbox" id="ch_emails" name="ch_emails" data-on="ON" data-off="OFF" /></li>
        </ul>
    </form>
    <div id="footer">
        <h2>提示</h2>
    </div>
</div>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="jquery.tzCheckbox/jquery.tzCheckbox.js"></script>
<script src="js/script.js"></script>
</body>
</html>

JS代码(script.js):

$(document).ready(function(){
	$('input[type=checkbox]').tzCheckbox({
	labels:['Enable','Disable']}
);
}
);

CSS代码(styles.css):

*{margin:0;padding:0;}
body{background:url('../img/page_bg.png') repeat-x;font:13px/1.3 'Segoe UI',Arial,sans-serif;color:#999;}
#page{width:550px;margin:150px auto 100px;}
form ul{list-style:none;}
form li{padding:15px;}
form li:nth-child(even){background:url('../img/line_bg.png') repeat-y center center;}
form label{width:370px;font-size:20px;color:#bbb;display:inline-block;}
a,a:visited{text-decoration:none;outline:none;color:#97cae6;}
a:hover{text-decoration:underline;}
#footer{background-color:#212121;position:fixed;width:100%;height:70px;bottom:0;left:0;z-index:100000;}
#footer h2{font-size:20px;font-weight:normal;left:50%;margin-left:-400px;padding:22px 0;position:absolute;width:400px;color:#eee;}
#footer a.tzine,a.tzine:visited{background:url("../img/tzine.png") no-repeat right top;border:none;text-decoration:none;color:#FCFCFC;font-size:12px;height:70px;left:50%;line-height:31px;margin:23px 0 0 110px;position:absolute;top:0;width:290px;}

附件:下载该文件资源,减少时间成本(增值服务)