css3 滑动开关按钮竖着的

最新推荐文章于 2021-05-31 00:49:07 发布

爱吃排骨

最新推荐文章于 2021-05-31 00:49:07 发布

阅读量429

点赞数 2

分类专栏： css3 jquery html

本文链接：https://blog.csdn.net/qq_36947128/article/details/106101483

版权

jquery 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

html

18 篇文章 0 订阅

订阅专栏

css3

9 篇文章 0 订阅

订阅专栏

在网上找了半天没有竖着的滑动开关，自己赶紧写一个

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>switch</title>

		<style>
		.switch{
			width: 24px;
		    height: 46px;
		    background: white;
		    border-radius: 20px;
		    border: 1px solid #CCCCCC;
		    position: relative;
		    background: linear-gradient(180deg,rgba(255,178,178,1) 0%,rgba(255,128,128,1) 100%);
		    box-shadow: 0px 0px 1px rgba(43,131,232,0.2);
			transition: background 1s ; 
		
		}
		.switch-border{
			    width: 18px;
			    height: 18px;
			    border-radius: 50%;
			    background: white;
			    display: inline-block;
			    position: absolute;
			    top: 5px;
			    left: 3px;
				transition: top 1s ; 
				cursor: pointer;
		}
		.switch-on{
			    font-size: 10px;
			    position: absolute;
			    /* top: 0; */
			    display: inline-block;
			    bottom: 5px;
			    left: 50%;
			    width: 24px;
			    margin-left: -12px;
			    text-align: center;
			    color: white;
				transition: bottom 1s ; 
		}
		.switch-bottom{
			bottom: 26px;
		}
		.switch-bg{
			background: linear-gradient(180deg,rgba(230,230,230,1) 0%,rgba(181,181,181,1) 100%);
		}
		.switch-top{
			top:24px
		}

  </style>
	</head>
	<body>
		<div class="switch">
			<span class="switch-border"></span>
			<span class="switch-on">开</span>

		</div>
		<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
		<script type="text/javascript">
			let status = false
			$(".switch-border").click(function() {
				status = !status
				if (status == true) {
					$(".switch-on").text("关")
				} else {
					$(".switch-on").text("开")
				}
				$(this).toggleClass("switch-top")
				$(".switch-on").toggleClass("switch-bottom")

				$(".switch").toggleClass("switch-bg")

			})
		</script>
	</body>
</html>

直接扣去用

爱吃排骨

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3 滑动开关按钮竖着的

在网上找了半天没有竖着的滑动开关，自己赶紧写一个<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>switch</title> <style> .switch{ width: 24px; height: 46px; background: white; border-
复制链接

扫一扫