iphone点击滑动图标确定效果

最新推荐文章于 2023-10-04 02:39:15 发布

Terry_wn

最新推荐文章于 2023-10-04 02:39:15 发布

阅读量526

点赞数

分类专栏： CSS JS 文章标签：滑动点击

本文链接：https://blog.csdn.net/weixin_42568381/article/details/84347765

版权

JS 同时被 2 个专栏收录

18 篇文章

订阅专栏

CSS

12 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript自定义复选框样式的实现方法，包括动画效果和状态改变的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<div class="wn-radio-box">
	<input name="def_addr" value="" type="checkbox" class="input-action" style="display: none">
	<span class="wn-radio-ball"></span>
</div>

css

.wn-radio-box {
    right: .3rem;
    top: .6rem;
    width: 3rem;
    height: 1.8rem;
    border-radius: 28px;
    background: #a2a2a2;
    margin-top: .16rem;
    margin-right: .2rem;
    position: absolute;
    transition: .5s background linear;
}
.wn-radio-ball {
    width: 1.4rem;
    height: 1.4rem;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    left: .2rem;
    top: .2rem;
}

  var radio_default = false;
  $('.wn-radio-box').click(function(event) {
    if(!radio_default){
      $('.wn-radio-ball').animate({
            'left':'1.48rem'
      }, 500)
      $('.wn-radio-box').css({
            'background-color':'#006cb7'
      }, 500)
      $('.input-action').prop("checked",true)
      radio_default = true;
    }else{
      $('.wn-radio-ball').animate({
            'left':'.2rem'
      }, 500)
      $('.wn-radio-box').css({
            'background-color':'#a2a2a2'
      }, 500)
      $('.input-action').prop("checked",false)
      radio_default = false;
    }
  });