<!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:**x;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.51sjk.com/Upload/Articles/1/0/329/329857_20220921163123206.jpg */ 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>
XHTMT|
HTML5|
CSS|
HTML DOM|
jQuery|
JSON|
AJAX|
LESS|
HTML|
Bootstrap|
Foundation|
AngularJS|
Ember.js|
TypeScript|
AngularJS2|
React|
jQuery UI|
jQuery EasyUI|
Node.js|
Highcharts|
Echarts|
Vue.js|
CoffeeScript|
Ext.js|
Meteor|
SASS|
Omi|
Markdown|
前端开发规范|
浏览器|
webpack|
JavaScript|
CSS3|
用户登录
还没有账号?立即注册
用户注册
投稿取消
文章分类: |
|
还能输入300字
上传中....