JQuery实现滑动开关效果

Demo效果如下，点击绿色椭圆小块，实现可滑动和动画效果，不是图片切换。

                    

HTML结构代码：

    是
    

CSS代码：

/**	外部div式样		*/
ck-switch{
	width: 75px;
  	height: 26px;
  	margin: 0px auto;
  	position: relative;
  	-moz-border-radius: 50px;
  	-webkit-border-radius: 50px;
  	border-radius: 50px;
  	-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  	-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
  	box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
}
/**	是.的效果#66b9b3绿色	*/
.ck-switch-on{
  	color: #66b9b3;
  	position: absolute;
  	left: 10px;
  	z-index: 0;
  	font-weight: bold;
}
/**	否.的效果#cccccc灰色	*/
.ck-switch-off{
	color: #CCCCCC;
	position: absolute;
 	right: 10px;
	z-index: 0;
	font-weight: bold;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.15);
}
/**	绿色椭圆小块	*/
.ck-switch-current{
  	display: block;
  	width: 30px;
  	height: 20px;
 	cursor: pointer;
  	position: absolute;
  	top: 3px;
  	z-index: 1;
  	background: #66b9b3;
  	-moz-border-radius: 50px;
  	-webkit-border-radius: 50px;
  	border-radius: 50px;
}
/**	left定位	*/
.ck-switch-current-3{
	left: 3px;
}
.ck-switch-current-40{
	left: 42px;
}

JQuery代码：

function initCkSwitch(){
	
	$('.ck-switch .ck-switch-off').unbind('click').bind('click',function(){
		$('.ck-switch .ck-switch-on').addClass('ck-switch-current ck-switch-current-3').html('');
		$('.ck-switch .ck-switch-off').removeClass('ck-switch-current ck-switch-current-40').html('否');
	});
	
	
	$('.ck-switch .ck-switch-on').unbind('click').bind('click',function(){
		if($(this).hasClass('ck-switch-on')){
			$('.ck-switch .ck-switch-on').removeClass('ck-switch-current ck-switch-current-3').html('是');
			$('.ck-switch .ck-switch-off').addClass('ck-switch-current ck-switch-current-40').html('');
		}
	});
};

点击滑块，动态的修改html的文字，显示‘是’，‘否’，修改滑块相对位置