html5移動端按住滑塊拖動驗證代碼



497 1984 662



特效描述:html5移動端 按住滑塊拖動 拖動驗證代碼,js html5適用于移動端的按住滑塊拖動驗證成功效果代碼。請用手機打開查看演示

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/ft-slider.css" />

2. 引入JS

<script src="js/ft-slider.min.js" type="text/javascript" charset="utf-8"></script>

3. HTML代碼

	<h3>請在移動端查看效果pc端無法拖拽</h3>
		<div class="container">
			<div id="slider1"></div>
			<div class="btn-wrap"><button id="btn1">還原</button></div>
			<div class="result-wrap">驗證結果:<span id="result1"></span></div>
		</div>
		<div class="container">
			<div id="slider2"></div>
			<div class="btn-wrap"><button id="btn2">還原</button></div>
			<div class="result-wrap">驗證結果:<span id="result2"></span></div>
		</div>
		<script>
			var btn1 = document.getElementById("btn1");
			var btn2 = document.getElementById("btn2");
			var result1 = document.getElementById("result1");
			var result2 = document.getElementById("result2");
			var slider1 = new FtSlider({
				id: "slider1",
				callback: function(res) {
					result1.innerHTML = res;
				}
			});
			var slider2 = new FtSlider({
				id: "slider2",
				width: 320,
				height: 36,
				textMsg: "拖動滑塊到右邊",
				successMsg: "驗證成功了哦",
				callback: function(res) {
					result2.innerHTML = res;
				}
			});
			btn1.onclick = function() {
				slider1.restore();
				result1.innerHTML = "false";
			}
			btn2.onclick = function() {
				slider2.restore();
				result2.innerHTML = "false";
			}
		</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 拖動 拖拽 拖動插件 拖拽插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 圖片拖動 圖片拖拽 滑動選項卡 滑動切換 按鈕控制 表單驗證 表單驗證插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子