如何使用jquery生成一个开关按钮效果呢?


摘要:
下文讲述使用jquery实现一个手机上的选择开关的方法分享,如下所示:

在互联网高度发达的今天,我们看见各种各样的炫酷的按钮效果,那么如何实现这些效果呢?

 实现思路:
     1.使用css定义圆形按钮的样式信息
     2.使用jquery改变div的样式信息,使其看起来是一个选择框的样式 

例:

<meta charset='utf-8' />
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"
 ></script>
<script>
$(function(){
  $("#divTest").text("猫猫教程");
});
</script>

<style>
.yuan{
            width: 50px;
            height: 30px;
            border-radius: 16px;
            background-color: #ccc;
            transition: .3s;
            cursor: pointer;
 }
.anniu{
            width: 30px;
            height: 30px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 1px 5px rgba(0,0,0,.5);
            transition: .3s;
            position: relative;
            left: 0;
}
.anniu:hover{
            transform: scale(1.2);
            box-shadow: 0 1px 8px rgba(0,0,0,.5);
}
</style>

<p>
 maomao365.com <br />
 jquery实现仿手机按钮开关的示例分享
</p>
<hr />
<div class="yuan">
    <div class="anniu"></div>
</div>

<script>

$(function () {
        $('.yuan').click(function () {
            var left = $('.anniu').css('left');
            left = parseInt(left);
            if (left == 0) {
                $('.anniu').css({'left': '22px', 'background-color': '#F00'});
                $(this).css({'background-color': '#e7e7e7', 'box-shadow': '0 0 5px #999 inset'})
            } else {
                $('.anniu').css({'left': '0', 'background-color': '#fff'})

            }
        })
    })

</script>
jquery实现一个仿手机按钮的示例分享

jquery实现一个仿手机按钮的示例分享