JQuery模拟常见的拖拽验证
css部分
<style>
#drag{
position: relative;
background-color: #e8e8e8;
width: 300px;
height: 34px;
line-height: 34px;
text-align: center;
margin: 50px auto;
}
#drag .handler{
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 32px;
border: 1px solid #ccc;
cursor: move;
}
.handler_bg{
background: #fff url("img/1.png") no-repeat center;
}
.handler_ok_bg{
background: #fff url("img/2.png") no-repeat center;
}
#drag .drag_bg{
background-color: #7ac23c;
height: 34px;
width: 0px;
}
#drag .drag_text{
position: absolute;
top: 0px;
width: 300px;
}
</style>
html部分
<div id="drag">
<div class="drag_bg"></div>
<div class="drag_text">拖动滑块验证</div>
<div class="handler handler_bg"></div>
</div>
JQuery部分
<script>
$(function(){
$(".handler").on("mousedown",function(e){
var disX = e.clientX - $("#drag").offset().left;
var maxWidth = $("#drag").width() - $(".handler").width();
$(document).on("mousemove",function(e){
var x = e.clientX - $("#drag").offset().left - disX;
x = Math.max(Math.min(x,maxWidth),0);
$(".handler").css("left",x);
$(".drag_bg").width(x);
if(x == maxWidth){
$(".handler").removeClass("handler_bg").addClass("handler_ok_bg");
$(".drag_text").css("color","#fff").html("验证成功");
$(document).off("mousemove");
$(document).off("mouseup");
$(".handler").off("mousedown");
e.preventDefault();
}
});
$(document).on("mouseup",function(e){
$(document).off("mousemove");
$(document).off("mouseup");
var x = e.clientX - $("#drag").offset().left - disX;
if(x < maxWidth){
$(".handler").css("left",0);
$(".drag_bg").width(0);
}
});
e.preventDefault();
});
});
</script>
JQuery模拟常见的拖拽验证的更多相关文章
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错.今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即 ...
- js 利用jquery.gridly.js实现拖拽并且排序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery UI API - 可拖拽小部件(Draggable Widget)(转)
所属类别 交互(Interactions) 用法 描述:允许使用鼠标移动元素. 版本新增:1.0 依赖: UI 核心(UI Core) 部件库(Widget Factory) 鼠标交互(Mouse I ...
- jquery.dragsort.js 实现拖拽过程遇到的问题
.在IE下第一次拖动的时候,被拖动的li元素会不显示,查了很多资料发现是因为在IE中定位出了问题,li标签还在,只是位置计算出错.解决的办法是在li的css样式中position设置为relative ...
- jquery dragsort table实现拖拽排序
转自:http://haoningabc.iteye.com/blog/1593640 dragsort官网地址:http://dragsort.codeplex.com/ html代码如下(需引入j ...
- jquery弹出层拖拽
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件
- jquery插件之拖拽改变元素大小
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被 ...
- jquery插件之拖拽
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽效果,您可以根据自己的实际需求来设置被拖拽元素是否可 ...
随机推荐
- java程序员技术范围
1 工具 开发工具.源代码管理.构建工具.测试工具(压力.安全等).接口测试工具.反编译工具.日志工具.第三方工具等 2 java jvm.多线程.socket.io(两种方式).集合(两大接口).异 ...
- 【interview——Ali】project interview_18 summer
完全没有准备的一次面试……意外 两部分:Word2vec + 中位数 (还有聊对科研的想法和自己研究能力的评价? word2vec //解释模型 原本是one-hot,存在缺点:稀疏和无法表现语义,词 ...
- get 和free
1.ngx_pool_t ** ngx_get_pool()//use:getngx_pool_t **pool_address;ngx_pool_t *pool;pool_address = ngx ...
- Jquery验证码倒计时
html代码: <input type="button" value="获取验证码" id="getCode" style=" ...
- Image Pipeline
Image Pipeline Scrapy 提供了专门下载文件或者图片的Pipeline,下载图片与文件的原理同抓取网页的原理是一样的,所以他们的下载过程支持多线程与异步,十分的高效 Image Pi ...
- 手把手详解持续集成之GitLab CI/CD
一.环境准备 首先需要有一台 GitLab 服务器,然后需要有个项目:这里示例项目以 Spring Boot 项目为例,然后最好有一台专门用来 Build 的机器,实际生产中如果 Build 任务不频 ...
- Uni-app事件处理
事件表: Web事件 uni-app事件 click tap touchstart touchstart touchmove touchmove touchcancel touchcancel tou ...
- caffe服务器搭建血泪记录
装过很多次caffe了,但这个还是遇到了很多奇葩问题,不过以前都是在ubuntu上,这次是在centos上. 1.import error _caffe.so: undefined symbol: ...
- js中字符串的replace方法区分单双引号
今天遇到一问题,js文件中调用字符串的replace方法,不起作用. 后来排查可能觉得replace("<option value='1'>admin</option&g ...
- python实现常见排序算法
#coding=utf-8from collections import deque #冒泡排序def bubblesort(l):#复杂度平均O(n*2) 最优O(n) 最坏O(n*2) for i ...