Demo效果如下，點選綠色橢圓小塊，實現可滑動和動畫效果，不是圖片切換。

HTML結構程式碼：

1. <divclass="ck-switch">
2.     <spanclass="ck-switch-on">是</span>
3.     <spanclass="ck-switch-off ck-switch-current ck-switch-current-40"></span>
4. </div>

<div class="ck-switch">
    <span class="ck-switch-on">是</span>
    <span class="ck-switch-off ck-switch-current ck-switch-current-40"></span>
</div>
 

CSS程式碼：

1. /** 外部div式樣     */
2. ck-switch{  
3.     width: 75px;  
4.     height: 26px;  
5.     margin: 0pxauto;  
6.     position: relative;  
7.     -moz-border-radius: 50px;  
8.     -webkit-border-radius: 50px;  
9.     border-radius: 50px;  
10.     -moz-box-shadow: inset0px1px1px rgba(0, 0, 0, 0.5), 0px1px0px
     rgba(255, 255, 255, 0.2);  
11.     -webkit-box-shadow: inset0px1px1px rgba(0, 0, 0, 0.5), 0px1px0px rgba(255, 255, 255, 0.2);  
12.     box-shadow: inset0px1px1px rgba(0, 0, 0, 0.5), 0px1px0px rgba(255, 255, 255, 0.2);  
13. }  
14. /** 是.的效果#66b9b3綠色  */
15. .ck-switch-on{  
16.     color: #66b9b3;  
17.     position: absolute;  
18.     left: 10px;  
19.     z-index
    : 0;  
20.     font-weight: bold;  
21. }  
22. /** 否.的效果#cccccc灰色  */
23. .ck-switch-off{  
24.     color: #CCCCCC;  
25.     position: absolute;  
26.     right: 10px;  
27.     z-index: 0;  
28.     font-weight: bold;  
29.     text-shadow: 1px1px0px rgba(255, 255, 255, 0.15);  
30. }  
31. /** 綠色橢圓小塊  */
32. .ck-switch-current{  
33.     display: block;  
34.     width: 30px;  
35.     height: 20px;  
36.     cursor: pointer;  
37.     position: absolute;  
38.     top: 3px;  
39.     z-index: 1;  
40.     background: #66b9b3;  
41.     -moz-border-radius: 50px;  
42.     -webkit-border-radius: 50px;  
43.     border-radius: 50px;  
44. }  
45. /** left定位  */
46. .ck-switch-current-3{  
47.     left: 3px;  
48. }  
49. .ck-switch-current-40{  
50.     left: 42px;  
51. }  

/**	外部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程式碼：

1. function initCkSwitch(){  
2.     $('.ck-switch .ck-switch-off').unbind('click').bind('click',function(){  
3.         $('.ck-switch .ck-switch-on').addClass('ck-switch-current ck-switch-current-3').html('');  
4.         $('.ck-switch .ck-switch-off').removeClass('ck-switch-current ck-switch-current-40').html('否');  
5.     });  
6.     $('.ck-switch .ck-switch-on').unbind('click').bind('click',function(){  
7.         if($(this).hasClass('ck-switch-on')){  
8.             $('.ck-switch .ck-switch-on').removeClass('ck-switch-current ck-switch-current-3').html('是');  
9.             $('.ck-switch .ck-switch-off').addClass('ck-switch-current ck-switch-current-40').html('');  
10.         }  
11.     });  
12. };  

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的文字，顯示‘是’，‘否’，修改滑塊相對位置