elementplus官网右上角的开关是怎么实现的_随笔

ElementPlus官网右上角的开关是基于HTML和CSS来实现的。首先，利用HTML中的<input type="checkbox">这个标签来创建一个开关，然后通过CSS中不同的类来设置打开和关闭状态时开关背景图片的样式显示，最后使用JS代码来实现开关状态切换时对其他网页元素的 *** 作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

.box{background: #629FCEwidth: 200pxheight: 30pxborder-radius: 15pxposition: relativeleft: 50pxtop: 50px}

.slider{background: #F6F6F6width: 100pxheight: 30pxborder-radius: 15pxposition: absolutetransition: left 0.5s -moz-transition: left 0.5s -webkit-transition: left 0.5sleft:0}

span{height: 30pxline-height: 30pxcolor: #F6F6F6font-weight: 800}

.m{float: leftmargin-left: 50px}

.w{float: rightmargin-right: 50px}

</style>

</head>

<body>

</div>

</body>

$("#slider").toggle(

function () {

$(this).css("left","100px")

function () {

$(this).css("left","0")

}

)

</script>

</html>

手打了一个给你，嘿嘿

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/8294942.html

elementplus官网右上角的开关是怎么实现的

发表评论

评论列表（0条）