使用Jquery实现美观的滑动解锁

来源：互联网发布：程序员常去的网站编辑：程序博客网时间：2024/05/16 07:21

　　我在页面创建了两个html元素

　　具体样式是

　　#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;

　　}

　　复制代码

　　具体的图片在后面提供的源码下载中有,实际上这个实现是很简单的,原理就是监听鼠标做相应动作而已.

　　下面是js解释

　　var fin = false; // 定义一个变量来检查解锁是否成功

　　var i_x = 0; // 定义一个x坐标这个变量用来计算鼠标x坐标增量

　　var max = $('#dp-lock-wapp').width() - $('#dp-lock-btn').width(); // 定义最大增量

　　然后下面是一个比较兼容性的获取鼠标x坐标的方法:

　　function getMouseX(ev){

　　ev=ev || window.event;

　　if(ev.pageX){

　　return ev.pageX;

　　}

　　return ev.clientX + document.body.scrollLeft - document.body.clientLeft

　　}

　　复制代码

0 0