清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>
<!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>