前言：
现在兄弟们对“jquery兼容ie8”大约比较注意，朋友们都想要分析一些“jquery兼容ie8”的相关知识。那么小编同时在网上收集了一些有关“jquery兼容ie8””的相关资讯，希望各位老铁们能喜欢，看官们快快来学习一下吧！废话不多说，直接丢代码！
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滑动验证</title> <style> .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(/res/global/img/slider.png) no-repeat center; } .ui-slider-wrap .ui-slider-btn.success { /*请替换图片地址*/ background-image: url(/res/global/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; } </style></head><body> <div id="j_sliderVerify" class="slider" style="width:300px;height:40px;margin:0 auto;"></div> <script src=";></script> <script> //插件代码 (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); //调用代码 $("#j_sliderVerify").slider({ width: 388, // width height: 40, // height sliderBg: "#e5e5e5", // 滑块背景颜色 color: "#646464", // 文字颜色 fontSize: 14, // 文字大小 bgColor: "#7ac14c", // 背景颜色 textMsg: "按住滑块，向右拖动", // 提示文字 successMsg: "验证通过", // 验证成功提示文字 successColor: "#fff", // 滑块验证成功提示文字颜色 time: 400, // 返回时间 callback: function(result) { // 回调函数，true(成功),false(失败) if (result) { //成功代码 }else{ //失败代码 } // 还原 // $("#slider1").slider("restore"); } }); </script></body></html>依赖jquery；请按需替换css样式内的slider.png 与 success.png代码地址；配合layui使用时请先简单包装一下；layui.use(['jquery'], function() { var $ = layui.$; //插件代码放在这});复制并另存为.html文件后用浏览器打开；marke一下以备用； 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jquery兼容ie8 #jquery滑块验证码 #滑动验证码插件
