前端开发jQuery滑动开关

网易游戏前端开发
前端开发游戏卡顿原因
游戏开发是wed前端开发吗

前段时间做的项目用到滑动开关,在网上随便搜了一个demo就用了,今天无意中又找到一个demo,才发现原来滑动开关可以做得那么简单,之前那个demo写了好长好长一段代码,瞬间感觉之前写的太麻烦了,现在把写法比较简单的demo记录一下。

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>jquery做的滑动按钮开关</title>
    </head>
    <style>
        .slideSwitch {
            width: 66px;
            height: 30px;
            padding: 3px;
            border-radius: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            background-color: #838383;
            position: relative;
        }
        .slideSwitch .btnn {
            width: 30px;
            height: 30px;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            background-color: #fff;
            position: absolute;
        }
    </style>
    <body>
        <div class=”slideSwitch”>
            <div isopen=”false” class=”btnn”></div>
        </div>
        <script
            type=”text/javascript”
            src=”http://code.jquery.com/jquery.js
        ></script>
        <script>
            $(function() {
                $(‘.slideSwitch’).on(‘click’, function() {
                    if (
                        $(this)
                            .children()
                            .attr(‘isopen’) == ‘false’
                    ) {
                        $(this)
                            .children()
                            .attr(‘isopen’, ‘true’)
                            .animate({ left: ’38px’ })
                        $(this).css(‘background-color’, ‘green’)
                    } else {
                        $(this)
                            .children()
                            .attr(‘isopen’, ‘false’)
                            .animate({ left: ‘3px’ })
                        $(this).css(‘background-color’, ‘#838383’)
                    }
                })
            })
        </script>
    </body>
</html>
游戏开发是属于前端吗
前端棋牌游戏开发代码
前端能开发游戏?
» 本文来自:前端开发者 » 《前端开发jQuery滑动开关》
» 本文链接地址:https://www.rokub.com/8087.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!