用jQuery实现鼠标拖拽div滑块选项卡居中弹窗

最新推荐文章于 2021-12-25 13:08:37 发布

OrdnAry

最新推荐文章于 2021-12-25 13:08:37 发布

阅读量329

点赞数

分类专栏：学习文章标签： jquery html js

本文链接：https://blog.csdn.net/OrdnAry/article/details/108699992

版权

学习专栏收录该内容

59 篇文章 5 订阅

订阅专栏

鼠标拖拽div滑块

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{width: 100px;height: 100px;background-color: red;position: absolute;}
        </style>
        <script src="../jquery-1.10.1.min.js"></script>
        <script>
            $(function(){
                //当鼠标按下div的时候执行函数
                $("div").mousedown(function(ev){
                    //找到鼠标距离div左边的距离
                    var offsetX = ev.pageX - $(this).offset().left;
                    //找到鼠标距离div上边的距离
                    var offsetY = ev.pageY - $(this).offset().top;
                    //用_this记录下来鼠标按下的 "这个" div
                    var _this = this;
                    //当鼠标移动的时候执行函数
                    $(document).mousemove(function(ev){
                        //让记录下的 "这个" div的CSS样式改变  
                        $(_this).css({
                            left: ev.clientX - offsetX + "px",
                            top: ev.clientY - offsetY + "px"
                        });
                    })
                })

                当鼠标抬起的时候执行函数 把鼠标移动的函数取消掉
                $("div").mouseup(function(){
                    $(document).off("mousemove");
                })
            })
        </script>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

在这里插入图片描述

选项卡

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .div1{width:270px;display: flex;flex-wrap:wrap;}
            .div1 div{width:300px;height: 150px; border: 1px black solid;display: none;}
            .div1 button{width:90px;height: 30px;}
            .active{background-color: orange;color: blue;}
        </style>
        <script src = '../jquery-1.10.1.min.js'></script>
        <script>
            $(function(){
                //找到button和div元素
                var btns = $(".div1").find("button");
                var divs = $(".div1").find("div");

                //当鼠标点击的时候执行函数
                btns.click(function(){
                    //首先把所有的button的样式都设置成空
                    btns.attr("class","");
                    //把所有的div的样式设置成隐藏
                    divs.css("display","none");

                    //找到点击的 "这个" 按钮的样式把他设置为active
                    $(this).attr("class", 'active');
                    //找到 "这个" 按钮在兄弟节点中的下标并且 用eq()找到它的下标 然后把这个下标的div的样式设置为块  让他显示
                    divs.eq($(this).index()).css("display","block");
                }) 
            })
        </script>
    </head>
    <body>
        <div class="div1">
            <button class="active">HTML5</button>
            <button>JavaScript</button>
            <button>jquery</button>
            <div style="display:block">万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容：）</div>
            <div>avaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早...</div>
            <div>jQuery 教程 jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 本章节的每一篇都包含了在线实例 通过本站的在线编辑器..</div>
            </div>
    </body>
</html>

在这里插入图片描述

居中弹窗

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="bootstrap.min.css">
        <script src="jquery-1.10.1.min.js"></script>
        <style>
            .form-group{width: 200px;height: 200px;border: 1px solid black;position: relative;display: none;}
            .form-group .X{position: absolute;right:0;}
        </style>
        <script>
            $(function(){
                //获取元素距离页面的高度居中
                var top = $(window).scrollTop() + ($(window).height() - $(".form-group").outerHeight(true))/2;
                 //获取元素距离页面的宽度居中
                var left =  ($(window).width() - $(".form-group").outerWidth(true))/2;
                //把元素的宽高的CSS样式设置好
                $(".form-group").css({
                    left: left,
                    top: top
                })
                //放页面发生放大缩小或者滚动的时候也执行上面的操作（让登录界面永远保持在页面中间）
                $(window).on("scroll resize",function(){
                    var top = $(window).scrollTop() + ($(window).height() - $(".form-group").outerHeight(true))/2;
                    var left =  ($(window).width() - $(".form-group").outerWidth(true))/2;

                    $(".form-group").css({
                    left: left,
                    top: top
                })
                })

                //当鼠标点击登录按钮的时候显示登录界面
                $(".btn").click(function(){
                    $(".form-group").css("display","block");
                })
                //当鼠标点击X号的时候隐藏登录界面
                $(".X").click(function(){
                    $(".form-group").css("display","none");
                })
            })
        </script>
    </head>
    <body style="height: 3000px;">
        <button type="button" class="btn btn-success">登录</button>
                <div class="form-group">
                  <button class="X">X</button>  
                  <label for="exampleInputEmail1">用户名</label>
                  <input class="form-control" id="exampleInputEmail1" placeholder="用户名">
                  <label for="exampleInputPassword1">密码</label>
                  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
                </div>
    </body>
</html>