demo.htm

﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <title>C#滑块验证码</title>
    <link href="./src/drag.css?v=1.1" rel="stylesheet" type="text/css" />
    <script src="./src/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="./src/drag.js?v=1.1" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            /******************************************************
             * 参数一 验证码图片规格 "300*300", "300*200", "200*100"
             * 参数二 校验通过时执行的回调函数
             * 绑定的div width与图片宽一致 height为图片高加34像素
             ******************************************************/
            $("#__Verification").slide({
                imgspec: "200*100",
                successCallBack: function () {
                    console.log("%c\u606d\u559c\u4f60\u002c\u6821\u9a8c\u901a\u8fc7\u0021",
                        'background:rgba(255,249,0,.1);color:#00ff21;font-size:40px;');
                }
            });
        })
        //选择规格
        function changespec() {
            var spec = window.document.getElementById("imgspec").value;
            $("#__Verification").slide({
                imgspec: spec,
                successCallBack: function () {
                    console.log("%c\u606d\u559c\u4f60\u002c\u6821\u9a8c\u901a\u8fc7\u0021",
                        'background:rgba(255,249,0,.1);color:#00ff21;font-size:40px;');
                }
            });
        }
    </script>
</head>
<body style="margin:30px auto auto 30px;">
    <div id="__Verification" style=" width:200px; height:134px;">
    </div>
    <p></p>
    <p><label for="imgspec">图片规格:</label>
        <select id="imgspec" onchange="changespec()">
            <option value="200*100">200*100</option>
            <option value="300*200">300*200</option>
            <option value="300*300">300*300</option>
        </select></p>
    <h1 style="color:rgba(0, 255, 33, 0.7);">eatage</h1>
</body>
</html>