本文实例为大家分享了微信小程序switch组件的实现代码,供大家参考,具体内容如下
效果图
HTML
<div class="switch-list"> <span class="fui-fr">红色switch组件</span> <input class="fui-switch" style="color:rgb(255, 0, 0);" type="checkbox" checked> </div> <div class="switch-list"> <span class="fui-fr">绿色switch组件</span> <input class="fui-switch" style="color:rgb(76, 216, 100);" type="checkbox" checked> </div> <div class="switch-list"> <span class="fui-fr">绿色禁用switch组件</span> <input class="fui-switch" style="color:rgb(76, 216, 100);" type="checkbox" checked disabled> </div> <div class="switch-list"> <span class="fui-fr">蓝色switch组件---开</span> <input class="fui-switch" style="color:blue" type="checkbox" checked> </div> <div class="switch-list"> <span class="fui-fr">蓝色switch组件---关</span> <input class="fui-switch" style="color:blue" type="checkbox"> </div>
CSS
.switch-list{ padding: .5rem; } .fui-switch{ position: relative; width: .87rem; height: .5rem; z-index: 10; display: inline-block; outline: medium; border: 1px solid #dfdfdf; border-radius: .25rem; background-color: #dfdfdf; -webkit-appearance: none; -moz-appearance: none; vertical-align: middle; } .fui-switch:checked{ border-color: currentColor; background-color: currentColor; } .fui-switch::after,.fui-switch::before{ content: ""; position: absolute; height: .44rem; top: 0; left: 0; border-radius: .25rem; -webkit-transition: -webkit-transform .3s; transition: -webkit-transform .3s; transition: transform .3s; transition: transform .3s,-webkit-transform .3s; } .fui-switch:before { width: .84rem; background-color: #fdfdfd; } .fui-switch:checked:before { -webkit-transform: scale(0); transform: scale(0); } .fui-switch:after { width: .44rem; background-color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); } .fui-switch:checked:after { -webkit-transform: translateX(.4rem); transform: translateX(.4rem); } .fui-switch[disabled] { opacity: .5; } .fui-fr{font-size: .3rem;vertical-align: middle;}
实现rem的JS
(function(win,factory){ factory(win); window.addEventListener('resize',function(){factory(win)},false); }(window,function(win){ var width = document.documentElement.clientWidth; width = width > 750 ? 750 : width; document.documentElement.style.fontSize = width / 7.5 + 'px'; }));
注意
此处 1rem 在 750 的 psd 设计图代表 100px ;
switch 的切换动画是通过 CSS3 的 transition 属性实现;
主要是控制 switch 的 after 的移动,以及 before 的放大缩小动画。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 金池VS刘罡2009《双声情》[WAV+CUE]
- 冯奥迪《卄》[320K/MP3][67.08MB]
- 冯奥迪《卄》[FLAC/分轨][172.46MB]
- Merryland《Merryland》[320K/MP3][69.48MB]
- 苏芮.1991-停在我心里的温柔【福茂】【WAV+CUE】
- 苏慧伦.2020-面面Every.Side.of.Me【相信音乐】【WAV+CUE】
- 群星.1991-不一样的感觉REMIX【宝丽金】【WAV+CUE】
- 银霞.1983-《你那好冷的小手》珍藏纪念版[WAV分轨]
- 银霞.2002-《国语巨星专辑VOL.3》2CD台湾版[WAV+CUE]
- 金池刘罡《昨日情歌HQ》头版限量编号[低速原抓WAV+CUE]
- 段奥娟.2024-23·岁碎念【白米范】【FLAC分轨】
- 顺子.2001-昨日·唯一·更多·顺子自选辑【魔岩】【WAV+CUE】
- 无印良品.1999-私藏三首·原创相对论(EP)【滚石】【WAV+CUE】
- Merryland《Merryland》[FLAC/分轨][170.22MB]
- 庄锭欣 ELKIE《没有你的未来》[320K/MP3][15.78MB]