Skip to content

Commit 0a2675b

Browse files
author
zhangyonghong
committed
update
1 parent 4a9aaa2 commit 0a2675b

File tree

2 files changed

+83
-9
lines changed

2 files changed

+83
-9
lines changed

‎c/5/index.html

Lines changed: 81 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="UTF-8">
5-
<title>跟随对联广告-豪情</title>
5+
<title>拖动滑块验证-豪情</title>
66
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
77
<style type="text/css">
88
*{ margin:0; padding:0; }
@@ -13,29 +13,102 @@
1313
.inner{ padding:15px; }
1414
.clearfix{ overflow:hidden; _zoom:1; }
1515
.none{ display:none; }
16-
#drag{position:relative;background-color:#e8e8e8;width:300px;height:34px;line-height:34px;text-align:center;}
17-
#drag .handler{position:absolute;top:0px;left:0px;width:40px;height:32px;border:1px solid #ccc;cursor:move;}
16+
#slider{position:relative;background-color:#e8e8e8;width:300px;height:34px;line-height:34px;text-align:center;}
17+
#slider .handler{position:absolute;top:0px;left:0px;width:40px;height:32px;border:1px solid #ccc;cursor:move;}
1818
.handler_bg{background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;}
1919
.handler_ok_bg{background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;}
20-
#drag .drag_bg{background-color:#7ac23c;height:34px;width:0px;}
21-
#drag .drag_text{position:absolute;top:0px;width:300px;-moz-user-select:none;-webkit-user-select:none;user-select:none;-o-user-select:none;-ms-user-select:none;}
20+
#slider .drag_bg{background-color:#7ac23c;height:34px;width:0px;}
21+
#slider .drag_text{position:absolute;top:0px;width:300px;-moz-user-select:none;-webkit-user-select:none;user-select:none;-o-user-select:none;-ms-user-select:none;}
22+
.unselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;}
23+
.slide_ok{color:#fff;}
2224
</style>
2325
</head>
2426
<body>
2527
<div class="wrap">
26-
<div id="drag">
28+
<div id="slider">
2729
<div class="drag_bg"></div>
2830
<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>
2931
<div class="handler handler_bg"></div>
3032
</div>
3133
</div>
32-
<div style="display:none1;">
34+
<div style="display:none;">
3335
<div id="div" style="width:100px;height:200px;background:#000;"></div>
3436
<button id="btn">test</button>
3537
</div>
3638
<script>
3739
(function(){
38-
40+
var dog = {
41+
$ : function(id){
42+
return document.querySelector(id);
43+
},
44+
on: function(el, type, handler){
45+
el.addEventListener(type, handler, false);
46+
},
47+
off: function(el, type, handler){
48+
el.removeEventListener(type, handler, false);
49+
}
50+
}
51+
function Slider(){
52+
var args = arguments[0];
53+
for(var i in args){
54+
this[i] = args[i];
55+
}
56+
this.init();
57+
}
58+
Slider.prototype = {
59+
init : function(){
60+
this.getDom();
61+
this.dragBar(this.handler);
62+
},
63+
getDom : function(){
64+
this.slider = dog.$('#' + this.id);
65+
this.handler = dog.$('.handler');
66+
this.bg = dog.$('.drag_bg');
67+
},
68+
dragBar : function(handler){
69+
var that = this,
70+
startX = 0,
71+
lastX = 0,
72+
doc = document,
73+
width = this.slider.offsetWidth,
74+
max = width - handler.offsetWidth,
75+
drag = {
76+
down : function(e){
77+
that.slider.classList.add('unselect');
78+
startX = e.clientX - handler.offsetLeft;
79+
dog.on(doc, 'mousemove', drag.move);
80+
dog.on(doc, 'mouseup', drag.up);
81+
return false;
82+
},
83+
move : function(e){
84+
lastX = e.clientX - startX;
85+
lastX = Math.max(0, Math.min(max, lastX));
86+
if(lastX >= max){
87+
handler.classList.add('handler_ok_bg');
88+
that.slider.classList.add('slide_ok');
89+
dog.off(handler, 'mousedown', drag.down);
90+
drag.up();
91+
}
92+
that.bg.style.width = lastX + 'px';
93+
handler.style.left = lastX + 'px';
94+
},
95+
up : function(){
96+
that.slider.classList.remove('unselect');
97+
if(lastX < width){
98+
that.bg.style.width = 0;
99+
handler.style.left = 0;
100+
}
101+
dog.off(doc, 'mousemove', drag.move);
102+
dog.off(doc, 'mouseup', drag.up);
103+
}
104+
}
105+
dog.on(handler, 'mousedown', drag.down);
106+
}
107+
}
108+
var defaults = {
109+
id : 'slider',
110+
}
111+
new Slider(defaults);
39112
}());
40113
</script>
41114
</body>

‎index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@
5252
{ url : 'c/1/index.html', title : '可拖动的弹出层' },
5353
{ url : 'c/2/index.html', title : '选项卡轮播' },
5454
{ url : 'c/3/index.html', title : '模拟滚动条' },
55-
{ url : 'c/4/index.html', title : '缓动的对联广告' }
55+
{ url : 'c/4/index.html', title : '缓动的对联广告' },
56+
{ url : 'c/5/index.html', title : '拖动滑块验证' }
5657
],
5758
[
5859
{ title : '第四章 常用图片轮换'},

0 commit comments

Comments
 (0)