请向右拖动滑块完成拼图向右拖动滑块以登录

你们好，最近小活发现有诸多的小伙伴们对于请向右拖动滑块完成拼图，向右拖动滑块以登录这个问题都颇为感兴趣的，今天小活为大家梳理了下，一起往下看看吧。

1、新建html文档。

2、书写hmtl代码。

3、<div class="container">

4、<div class="demo1">

5、 <div class="btns">

6、 <button id="reset1">还原</button>

7、 </div>

8、 <div class="slider"></div>

9、 <div class="result">验证结果：<span id="result1"></span></div>

10、 <div>参数：</div>

11、 <pre>

12、$("#slider1").slider({

13、callback: function(result) {

14、$("#result1").text(result);

15、}

16、});

17、 </pre>

18、</div>

19、<div class="demo2">

20、 <div class="btns">

21、 <button id="reset2">还原</button>

22、 </div>

23、 <div class="slider"></div>

24、 <div class="result">验证结果：<span id="result2"></span></div>

25、 <div>参数：</div>

26、 <pre>

27、$("#slider2").slider({

28、width: 340, // width

29、height: 40, // height

30、sliderBg:"rgb(134, 134, 131)",// 滑块背景颜色

31、color:"#fff",// 文字颜色

32、fontSize: 14, // 文字大小

33、bgColor: "#33CC00", // 背景颜色

34、textMsg: "按住滑块，拖拽验证", // 提示文字

35、successMsg: "验证通过了哦", // 验证成功提示文字

36、successColor: "red", // 滑块验证成功提示文字颜色

37、time: 400, // 返回时间

38、callback: function(result) { // 回调函数，true(成功),false(失败)

39、$("#result2").text(result);

40、}

41、});

42、 </pre>

43、</div>

44、</div>

45、书写css样式代码。

46、body, div { margin: 0; padding: 0; }

47、.ui-slider-wrap { background: #e8e8e8; position: relative; }

48、.ui-slider-wrap .ui-slider-bg { width: 0; }

49、.ui-slider-wrap .ui-slider-btn { position: absolute; top: 0; left: 0; cursor: move; text-align: center; border: 1px solid #ccc; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

50、.ui-slider-wrap .ui-slider-btn { background: #fff url(../img/slider.png) no-repeat center; }

51、.ui-slider-wrap .ui-slider-btn.success { background-image: url(../img/success.png); }

52、.ui-slider-wrap .ui-slider-text { width: 100%; height: 100%; font-family: "微软雅黑"; text-align: center; position: absolute; top: 0; left: 0; color: #666; }

53、.ui-slider-wrap .ui-slider-no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }

54、button { display: inline-block; padding: 6px 12px; line-height: 1.4; text-align: center; border: 1px solid transparent; border-radius: 4px; color: #fff; background-color: #5bc0de; border-color: #46b8da; cursor: pointer; font-size: 15px; }

55、.container { width: 1080px; height: 600px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

56、.demo1 { width: 48%; height: 100%; float: left; padding: 20px; border: 1px dashed #fff; border-radius: 4px; box-sizing: border-box; position: relative; }

57、.demo2 { width: 48%; height: 100%; float: right; padding: 20px; border: 1px dashed #fff; border-radius: 4px; box-sizing: border-box; position: relative; }

58、.btns, .slider, .result { margin-bottom: 40px; }

59、pre { font-size: 13px; }

60、书写页面js。

61、<script>

62、 $("#slider1").slider({

63、 callback: function(result) {

64、 $("#result1").text(result);

65、 }

66、 });

67、 $("#slider2").slider({

68、 width: 340, // width

69、 height: 40, // height

70、 sliderBg: "rgb(134, 134, 131)", // 滑块背景颜色

71、 color: "#fff", // 文字颜色

72、 fontSize: 14, // 文字大小

73、 bgColor: "#33CC00", // 背景颜色

74、 textMsg: "按住滑块，拖拽验证", // 提示文字

75、 successMsg: "验证通过了哦", // 验证成功提示文字

76、 successColor: "red", // 滑块验证成功提示文字颜色

77、 time: 400, // 返回时间

78、 callback: function(result) { // 回调函数，true(成功),false(失败)

79、 $("#result2").text(result);

80、 }

81、 });

82、 $("#reset1").click(function() {

83、 $("#slider1").slider("restore");

84、 });

85、 $("#reset2").click(function() {

86、 $("#slider2").slider("restore");

87、 });

88、</script>

89、书写jquery.slider.min.js。

90、(function(t,i,s,e){var l=function(i,s){this.ele=i;this.defaults={width:300,height:34,sliderBg:"#e8e8e8",color:"#666",fontSize:12,bgColor:"#7ac23c",textMsg:"请按住滑块，拖动到最右边",successMsg:"验证成功",successColor:"#fff",time:160,callback:function(t){}};this.opts=t.extend({},this.defaults,s);this.init()};l.prototype={init:function(){this.result=false;this.sliderBtn_left=0;this.maxLeft=this.opts.width-this.opts.height;this.render();this.eventBind()},render:function(){var t='<div class="ui-slider-wrap">' '<div class="ui-slider-text ui-slider-no-select">' this.opts.textMsg "</div>" '<div class="ui-slider-btn init ui-slider-no-select"></div>' '<div class="ui-slider-bg"></div>' "</div>";this.ele.html(t);this.initStatus()},initStatus:function(){var t=this;var i=this.ele;this.slider=i.find(".ui-slider-wrap");this.sliderBtn=i.find(".ui-slider-btn");this.bgColor=i.find(".ui-slider-bg");this.sliderText=i.find(".ui-slider-text");this.slider.css({width:t.opts.width,height:t.opts.height,backgroundColor:t.opts.sliderBg});this.sliderBtn.css({width:t.opts.height,height:t.opts.height,lineHeight:t.opts.height "px"});this.bgColor.css({height:t.opts.height,backgroundColor:t.opts.bgColor});this.sliderText.css({lineHeight:t.opts.height "px",fontSize:t.opts.fontSize,color:t.opts.color})},restore:function(){var t=this;var i=t.opts.time;this.result=false;this.initStatus();this.sliderBtn.removeClass("success").animate({left:0},i);this.bgColor.animate({width:0},i,function(){t.sliderText.text(t.opts.textMsg)})},eventBind:function(){var t=this;this.ele.on("mousedown",".ui-slider-btn",function(i){if(t.result){return}t.sliderMousedown(i)})},sliderMousedown:function(t){var i=this;var s=t.clientX;var e=s-this.sliderBtn.offset().left;i.sliderMousemove(s,e);i.sliderMouseup()},sliderMousemove:function(i,e){var l=this;t(s).on("mousemove.slider",function(t){l.sliderBtn_left=t.clientX-i-e;if(l.sliderBtn_left<0){return}if(l.sliderBtn_left>l.maxLeft){l.sliderBtn_left=l.maxLeft}l.sliderBtn.css("left",l.sliderBtn_left);l.bgColor.width(l.sliderBtn_left)})},sliderMouseup:function(){var i=this;t(s).on("mouseup.slider",function(){if(i.sliderBtn_left!=i.maxLeft){i.sliderBtn_left=0}else{i.ele.find(".ui-slider-text").text(i.opts.successMsg).css({color:i.opts.successColor});i.ele.find(".ui-slider-btn").addClass("success");i.result=true}i.sliderBtn.animate({left:i.sliderBtn_left},i.opts.time);i.bgColor.animate({width:i.sliderBtn_left},i.opts.time);t(this).off("mousemove.slider mouseup.slider");if(i.opts.callback&&typeof i.opts.callback==="function"){i.opts.callback(i.result)}})}};t.fn.slider=function(i){return this.each(function(){var s=t(this);var e=s.data("slider");if(!e){e=new l(s,i);s.data("slider",e)}if(typeof i==="string"){e[i]()}})}})(jQuery,window,document);

91、页面代码整体结构。<script src="https://www.xhjyxxw.com/jxkx/202402/js/jquery.min.js"></script>是个js包网上可以下载。

92、查看效果。

这篇好文章是转载于：知行礼动