实现PC手机端和嵌入式滑动拼图验证码，可以使用JS库“SlideVerify”，该库可以轻松地实现滑动验证码。下面是实现过程的完整攻略。
在HTML文档中引入SlideVerify库，可以通过以下方式引入：
<script src="path/to/SlideVerify.js"></script>
注意：path/to/ 表示你的库文件所在的路径。如果库文件和HTML文档在同一目录下，可以直接使用文件名。如果在不同目录下，需要修改路径。
使用图像编辑器创建一张滑动拼图验证码图像，图像应包含两部分，一部分是包含有拼图的原图，另一部分则是隐藏在拼图底部的空白部分。带有拼图的部分应该有足够的空间让用户拖动拼图。
SlideVerify提供了一个SlideVerify构造函数，可以用来创建滑动验证码。构造函数的基本用法如下：
var slider = new SlideVerify(element,options);
其中，element表示验证码元素的DOM对象，options是一个配置对象，包含了一系列可以设置的选项。
例如，可以使用以下代码创建一个滑动验证码：
// HTML:
<div id="verify"></div>
// Javascript:
var slider = new SlideVerify(document.getElementById('verify'), {
width: 260,
height: 116,
sliderSize: 50,
successText: '验证通过',
failText: '验证失败'
});
通过SlideVerify的验证方法验证滑动验证码，可以使用以下代码：
var result = slider.verify();
验证方法返回一个Boolean值。如果滑动拼图的位置与原位置匹配，返回true；否则返回false。
下面是一个具体的示例，演示如何使用SlideVerify库创建滑动验证码：
<!doctype html>
<html>
<head>
<title>滑动拼图验证码演示</title>
<style>
#slider {
width: 320px;
height: 160px;
background-color: #f0f0f0;
margin: 30px auto;
border: 1px solid #ccc;
text-align: center;
font-size: 14px;
line-height: 160px;
}
#success {
color: #008000;
}
#fail {
color: #ff0000;
}
</style>
<script src="path/to/SlideVerify.js"></script>
<script>
window.onload = function() {
var slider = new SlideVerify(document.getElementById('slider'), {
width: 320,
height: 160,
sliderSize: 50,
successText: '验证通过',
failText: '验证失败'
});
document.getElementById('btn').onclick = function() {
if(slider.verify()) {
document.getElementById('result').innerText = "验证通过";
} else {
document.getElementById('result').innerText = "验证失败";
}
};
};
</script>
</head>
<body>
<div id="slider"></div>
<div id="btn">验证</div>
<div id="result"></div>
</body>
</html>
下面是一个具体的示例，演示如何使用SlideVerify库创建嵌入式滑动验证码：
<!doctype html>
<html>
<head>
<title>嵌入式滑动拼图验证码演示</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial,sans-serif;
}
iframe {
width: 320px;
height: 160px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -160px;
margin-top: -80px;
border: none;
}
</style>
<script src="path/to/SlideVerify.js"></script>
<script>
window.onload = function() {
var slider = new SlideVerify(window.parent.document.getElementById('slider'), {
width: 320,
height: 160,
sliderSize: 50,
successText: '验证通过',
failText: '验证失败'
});
};
</script>
</head>
<body>
<iframe src="slideVerify.html"></iframe>
</body>
</html>
在这个示例中，嵌入式滑动验证码位于一个iframe中。验证结果会传递给iframe所在的父页面。
本文链接：http://task.lmcjl.com/news/8341.html