华丽的滑动解锁,用于留言板评论框

2015/05/28 32845
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            body{
                background:#fbfbfb;
            }
            #dp-lock-wapp{
                height:29px;position:relative;text-align:left;background:#fff;padding:3px;border:1px solid #ccc;
            }
            #dp-lock-btn{
                background-attachment:fixed;
                display:inline-block;height:29px;width:40px;border-left:1px solid #ccc;cursor:pointer;background:url('./arr-btn.png') -42px 0px no-repeat;
            }
            #dp-lock-btn:hover{
                background-position-y:-48px;
            }
        </style>
        <script src="./jquery-min.js"></script>
        <script type="text/javascript">
            $(function(){
                /**
                 * @author koodo koodo@qq.com 二叉树社区出品
                 * @qq 420175369
                 * 预览 http://www.27tree.com/account/login/
                 */
                var fin = false; // 解锁完成判断
                var i_x = 0;  // 初始鼠标x坐标
                var max = $('#dp-lock-wapp').width() - $('#dp-lock-btn').width();
                // 滑动解锁脚本
                $('#dp-lock-btn').mousedown(function(){
                    if(!fin) listen = true; // 如果解锁未完成 监听鼠标
                    document.onmousemove = function(e){
                        if(listen){
                            if(i_x == 0) i_x = e.x; // 初始化x坐标
                            var ml = e.x - i_x; // 移动距离
                            ml = ml > 0 ? ml > max ? max : ml : 0; // 距离判断
                            $('#dp-lock-btn').css('margin-left',ml + 'px');
                            
                            // ML == ,ax 时完成解锁
                            if(ml == max) {
                                fin = true;
                                listen = false;
                                
                                // 解锁完毕,下面你爱干嘛干嘛
                                // do something ...
                            }
                        }
                    }
                    $(document).mouseup(function(){
                        listen = false;
                    });
                });
            });
        </script>
    </head>
    <body>
        <div style="width:300px;margin:300px auto;">
            <div id="dp-lock-wapp">
                <a id="dp-lock-btn"></a>
            </div>
        </div>
    </body>
</html>
代码片段
