JQuery实现滑动开关效果

最新推荐文章于 2023-05-17 17:45:53 发布

原创最新推荐文章于 2023-05-17 17:45:53 发布 · 8.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #jquery #开关式按钮

Web前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和jQuery实现的交互式UI组件，该组件通过点击绿色椭圆小块，实现可滑动和动画效果，而非简单的图片切换。详细展示了组件的HTML结构、CSS样式和jQuery脚本，提供了实现动态文字显示和滑块位置调整的方法。

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

HTML结构代码：

<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代码：

/**	外部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的文字，显示‘是’，‘否’，修改滑块相对位置