【无标题】

已于 2025-06-27 15:08:39 修改
阅读量230 收藏 5
点赞数 4
CC 4.0 BY-SA版权
文章标签： css css3 html
于 2025-05-09 16:49:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147832380

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery滑动验证解锁插件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f5f5;
            padding: 20px;
        }
        
        .slideunlock-container {
            width: 300px;
            margin: 50px auto;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
        }
        
        .slideunlock-title {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }
        
        .slideunlock-slider {
            position: relative;
            width: 100%;
            height: 40px;
            background-color: #f0f0f0;
            border-radius: 20px;
            overflow: hidden;
        }
        
        .slideunlock-slider-bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 100%;
            background-color: #4CAF50;
            transition: width 0.3s;
        }
        
        .slideunlock-slider-btn {
            position: absolute;
            left: 0;
            top: 0;
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .slideunlock-slider-btn:after {
            content: "→";
            color: #666;
            font-size: 18px;
        }
        
        .slideunlock-slider-tip {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            line-height: 40px;
            text-align: center;
            color: #666;
            z-index: 5;
        }
        
        .slideunlock-success {
            text-align: center;
            margin-top: 15px;
            color: #4CAF50;
            font-weight: bold;
            display: none;
        }
        
        .slideunlock-reset {
            display: block;
            margin: 20px auto 0;
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            display: none;
        }
        
        .slideunlock-reset:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <div class="slideunlock-container">
        <h3 class="slideunlock-title">请滑动滑块完成验证</h3>
        <div class="slideunlock-slider">
            <div class="slideunlock-slider-bg"></div>
            <div class="slideunlock-slider-btn"></div>
            <div class="slideunlock-slider-tip">请按住滑块，拖动到最右边</div>
        </div>
        <div class="slideunlock-success">验证通过！</div>
        <button class="slideunlock-reset">重新验证</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    (function($) {
        $.fn.slideunlock = function(options) {
            var settings = $.extend({
                successLabelTip: "验证通过！",
                duration: 200,
                resetBtn: true,
                callback: function() {}
            }, options);
            
            return this.each(function() {
                var $container = $(this);
                var $slider = $container.find('.slideunlock-slider');
                var $btn = $slider.find('.slideunlock-slider-btn');
                var $bg = $slider.find('.slideunlock-slider-bg');
                var $tip = $slider.find('.slideunlock-slider-tip');
                var $success = $container.find('.slideunlock-success');
                var $reset = $container.find('.slideunlock-reset');
                
                var isMouseDown = false;
                var startX = 0;
                var maxWidth = $slider.width() - $btn.width();
                var isSuccess = false;
                
                // 初始化
                $success.text(settings.successLabelTip);
                
                // 鼠标按下事件
                $btn.on('mousedown touchstart', function(e) {
                    if (isSuccess) return;
                    
                    isMouseDown = true;
                    startX = e.type === 'mousedown' ? e.pageX : e.originalEvent.touches[0].pageX;
                    $btn.addClass('active');
                    
                    e.preventDefault();
                });
                
                // 鼠标移动事件
                $(document).on('mousemove touchmove', function(e) {
                    if (!isMouseDown || isSuccess) return;
                    
                    var moveX = e.type === 'mousemove' ? e.pageX : e.originalEvent.touches[0].pageX;
                    var offsetX = moveX - startX;
                    
                    if (offsetX < 0) {
                        offsetX = 0;
                    } else if (offsetX > maxWidth) {
                        offsetX = maxWidth;
                        success();
                    }
                    
                    $btn.css('left', offsetX);
                    $bg.css('width', offsetX);
                });
                
                // 鼠标释放事件
                $(document).on('mouseup touchend', function() {
                    if (!isMouseDown || isSuccess) return;
                    
                    isMouseDown = false;
                    $btn.removeClass('active');
                    
                    if (parseInt($btn.css('left')) < maxWidth) {
                        reset();
                    }
                });
                
                // 验证成功
                function success() {
                    isSuccess = true;
                    $tip.hide();
                    $success.fadeIn(settings.duration);
                    
                    if (settings.resetBtn) {
                        $reset.fadeIn(settings.duration);
                    }
                    
                    settings.callback.call(this);
                }
                
                // 重置滑块
                function reset() {
                    $btn.animate({left: 0}, settings.duration);
                    $bg.animate({width: 0}, settings.duration);
                }
                
                // 重置按钮事件
                $reset.on('click', function() {
                    isSuccess = false;
                    $success.hide();
                    $reset.hide();
                    $tip.show();
                    reset();
                });
            });
        };
    })(jQuery);
    
    // 初始化插件
    $(document).ready(function() {
        $('.slideunlock-container').slideunlock({
            successLabelTip: "验证成功！",
            callback: function() {
                console.log("验证通过回调函数");
                // 这里可以添加验证通过后的操作

            }
        });
    });
    </script>
    
    <!-- 示例链接 -->
    <div style="text-align: center; margin-top: 50px;">

    </div>
</body>
</html>

ziblog
关注
Qt-无标题窗口
学而思
05-21 8463
        今天学习了下无标题窗口，于是来记录下我的学习过程首先建立一个Qt Widgets Application继承QWidget类创建完后直接运行就得到了如下效果那么，既然是无标题窗口就要去掉窗口栏啊，于是加上setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);去掉标题栏，但是这样整个窗口就不能移动...
C#中实现无标题栏窗体拖动的代码
百锦再的博客
01-18 1万+
事件来实现拖动功能。当鼠标按下时，我们标记鼠标正在拖动，并保存当前坐标。在鼠标移动时，如果鼠标正在拖动，我们更新窗体的位置，使其跟随鼠标移动。当鼠标释放时，我们取消拖动标记。请注意，在窗体上添加了对应事件处理程序的窗体控件属性应该设置为对应的事件处理程序方法。在窗体设计视图，选择属性窗格，在事件选项卡中为。在C#中实现无标题栏窗体拖动的代码可以通过处理鼠标事件来实现。这样，当你在运行窗体时，你就可以通过鼠标拖动窗体来改变其位置。事件分别选择对应的处理程序方法。在这个示例代码中，我们通过处理。
【无标题】获取网页文本
热门推荐
bvip911的博客
10-09 8万+
‘李元豪 from https://www.zhilu.space’= ‘李元豪 from https://www.zhilu.space’= ‘李元豪 from https://www.zhilu.space’= ‘李元豪 from https://www.zhilu.space’
谷歌浏览器打开无标题
mp2020xuexi的博客
01-16 1778
谷歌浏览器
C# 移动无标题栏无边框窗体的3种方法
SabreWulf
03-13 2411
目录 第一种：手工移动 第二种：调用系统API 1.引入下面代码 前提需要引入命名空间using System.Runtime.InteropServices 2.增加鼠标按下事件发送消息，让系统误以为按下是标题栏 第三种，重写 WndProc 第一种：手工移动 直接通过修改窗体位置从而达到移动窗体的效果 //定义一个位置信息Point用于存储鼠标位置 private Point mPoint; /// <summary>
【无标题】一不错的网站
shen_haidabiaoge的博客
05-18 2624
大家要谅解我呀，我这是没有办法
Qt实现改变无标题栏窗体大小及移动窗体
danshiming的博客
11-10 4467
Qt实现鼠标左键拖动无标题栏窗体右下角改变窗体大小及移动窗体
Chrome显示无标题错误代码STATUS_INVALID_IMAGE_HASH
precy_wm的博客
01-03 2759
Chrome显示无标题错误代码STATUS_INVALID_IMAGE_HASH
WIN32无标题栏窗口移动方法种种
ZDT_zdh的博客
11-02 3012
WIN32无标题栏窗口移动方法种种 转载来源：http://blog.youkuaiyun.com/fuyun_cloud/article/details/8008197     首先，看看在正常情况下系统是怎样来移动程序窗口的。当使用者在程序窗口标题栏区域（非工作区）内，按下鼠标左键时将会发生下列事情：  ◆ 系统向该窗口过程函数发送WM_NCLBUTTONDOWN消息。  ◆ WM_NC...
c#实现无标题栏窗口的拖动
09-05
本篇文章将详细讲解如何在C#中实现这种无标题栏窗口的拖动以及其他基本操作。 首先，为了实现无标题栏窗口的拖动，我们需要处理窗体的鼠标事件。窗体的`FormBorderStyle`属性应设置为`None`，这会去除窗体的边框和...
Qt无标题窗口
05-21
在本文中，我们将深入探讨如何使用Qt框架创建一个无标题窗口，这在界面设计和自定义标题栏美化中非常有用。我们将关注`framelesswidget.cpp`、`main.cpp`、`framelesswidget.h`等核心文件，理解它们在实现无标题窗口...
C#创建无标题栏窗体
03-16
摘要:C#源码,菜单窗体,无标题栏窗体　C#创建无标题栏窗体源码，实际上是动态显示或隐藏窗体的标题栏，当隐藏的时候就类似窗体没有了标题栏，当显示标题栏的时候，鼠标按住标题栏即可拖动窗体，以前记得网友需要此...
Delphi实现拖动按钮移动无标题栏窗口
05-11
摘要:Delphi源码,界面编程,窗体拖动,无标题栏 无标题栏的窗体的拖动功能实现，Delphi添加一个可拖动窗体的按钮，通过对此按钮的控制可移动窗体，实现按住标题栏移动窗口的功能，无标题栏也就不能显示最大化、最小化...
VC去掉&#39;无标题&#39;字样的方法.zip
11-21
在使用Visual C++进行编程时，我们经常会在创建新的窗口或者对话框时默认看到标题栏显示为“无标题”。这可能会对用户界面的美观性和专业性造成一定的影响。本资料包提供了一种方法来帮助开发者去掉这个“无标题”...
CSS的content属性妙用指南
HTTP404_CN的博客
07-21 476
CSS的content属性专用于伪元素::before和::after，可在文档中动态生成装饰性内容。主要功能包括插入文本、图标（通过Unicode）、显示元素属性值、创建计数器序号以及生成纯样式元素（如三角形）。该属性仅作用于伪元素，不影响DOM结构，支持多种特殊格式，并能实时更新。但需注意：生成内容可能被屏幕阅读器忽略，不应替代HTML核心内容，且部分功能（如计数器）在旧版浏览器兼容性较差。典型应用包括清除浮动、添加文件类型提示等，适用于增强视觉表现而非内容结构。
网络初级安全第三次作业
2302_81663869的博客
07-22 291
通用容器标签，用于分组其他元素，便于通过 CSS 统一样式或通过 JavaScript 操作。一级标题标签，用于显示页面的主要标题（此处为 “账户登录”），具有语义化含义，也影响搜索引擎排名。包含 CSS 样式代码，用于控制页面元素的布局和外观（如颜色、大小、间距等）。包含 JavaScript 代码，用于实现交互逻辑（如表单验证、提交处理等）。包含页面的元数据（不直接显示在页面上的信息），如字符集、标题、样式等。定义页面标题，显示在浏览器标签页上，也用于搜索引擎索引。表单标签，用于创建用户输入表单。
【HTML】图片比例和外部div比例不一致，最大程度占满
爱喝星冰乐的博客
07-21 375
图片最大程度占满
CSS中的transform
最新发布
illhm的博客
07-22 355
在 CSS 中，transform是用于用于用于对元素进行的属性，可实现旋转、缩放、平移、倾斜等效果，且不会影响其他元素的布局（不会触发重排）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值