adobe dreamweaver
新建html文档。
书写hmtl代码。
$('#slider1').slider({callback: function(result) {$('#result1').text(result);}}); $('#slider2').slider({width: 340, // widthheight: 40, // heightsliderBg:'rgb(134, 134, 131)',// 滑块背景颜色color:'#fff',// 文字颜色fontSize: 14, // 文字大小bgColor: '#33CC00', // 背景颜色textMsg: '按住滑块，拖拽验证', // 提示文字successMsg: '验证通过了哦', // 验证成功提示文字successColor: 'red', // 滑块验证成功提示文字颜色time: 400, // 返回时间callback: function(result) { // 回调函数，true(成功),false(失败)$('#result2').text(result);}}); 书写css样式代码。body, div { margin: 0; padding: 0; }.ui-slider-wrap { background: #e8e8e8; position: relative; }.ui-slider-wrap .ui-slider-bg { width: 0; }.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; }.ui-slider-wrap .ui-slider-btn { background: #fff url(../img/slider.png) no-repeat center; }.ui-slider-wrap .ui-slider-btn.success { background-image: url(../img/success.png); }.ui-slider-wrap .ui-slider-text { width: 100%; height: 100%; font-family: '微软雅黑'; text-align: center; position: absolute; top: 0; left: 0; color: #666; }.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; }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; }.container { width: 1080px; height: 600px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }.demo1 { width: 48%; height: 100%; float: left; padding: 20px; border: 1px dashed #fff; border-radius: 4px; box-sizing: border-box; position: relative; }.demo2 { width: 48%; height: 100%; float: right; padding: 20px; border: 1px dashed #fff; border-radius: 4px; box-sizing: border-box; position: relative; }.btns, .slider, .result { margin-bottom: 40px; }pre { font-size: 13px; }
书写页面js。
书写jquery.slider.min.js。(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='
';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);页面代码整体结构。是个js包网上可以下载。
查看效果。
js/jquery.min.js是个js包网上可以下载。