欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript實(shí)現(xiàn)登錄框拖拽

 更新時(shí)間：2022年08月09日 17:18:43   作者：派大星?  
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)登錄框拖拽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了javascript實(shí)現(xiàn)登錄框拖拽的具體代碼，供大家參考，具體內(nèi)容如下

效果：

代碼：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .login-header {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }
        
        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
            padding: 0px;
            margin: 0px;
        }
        
        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }
        
        .login-title {
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
        }
        
        .login-input-content {
            margin-top: 20px;
        }
        
        .login-button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }
        
        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }
        
        a {
            text-decoration: none;
            color: #000000;
        }
        
        .login-button a {
            display: block;
        }
        
        .login-input input.list-input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }
        
        .login-input {
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }
        
        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }
        
        .login-title span {
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="login-header"><a id="link" href="javascript:;">點(diǎn)擊，彈出登錄框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登錄會(huì)員
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">關(guān)閉</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用戶名：</label>
                <input type="text" placeholder="請(qǐng)輸入用戶名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登錄密碼：</label>
                <input type="password" placeholder="請(qǐng)輸入登錄密碼" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登錄會(huì)員</a></div>
    </div>
    <!-- 遮蓋層 -->
    <div id="bg" class="login-bg"></div>
    <script>
        // 1. 獲取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');
        var title = document.querySelector('#title');
        // 2. 點(diǎn)擊彈出層這個(gè)鏈接 link  讓mask 和login 顯示出來(lái)
        link.addEventListener('click', function() {
                mask.style.display = 'block';
                login.style.display = 'block';
            })
            // 3. 點(diǎn)擊 closeBtn 就隱藏 mask 和 login 
        closeBtn.addEventListener('click', function() {
                mask.style.display = 'none';
                login.style.display = 'none';
            })
            // 4. 開(kāi)始拖拽
            // (1) 當(dāng)我們鼠標(biāo)按下， 就獲得鼠標(biāo)在盒子內(nèi)的坐標(biāo)
        title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // (2) 鼠標(biāo)移動(dòng)的時(shí)候，把鼠標(biāo)在頁(yè)面中的坐標(biāo)，減去 鼠標(biāo)在盒子內(nèi)的坐標(biāo)就是模態(tài)框的left和top值
            document.addEventListener('mousemove', move)

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            // (3) 鼠標(biāo)彈起，就讓鼠標(biāo)移動(dòng)事件移除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>
</body>

</html>

注意：mousemove和mouseup應(yīng)該在mousedown里面，并且目標(biāo)對(duì)象是document，而不是title。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 原生js+css調(diào)節(jié)音量滑塊

    原生js+css調(diào)節(jié)音量滑塊

    這篇文章主要介紹了原生js+css調(diào)節(jié)音量滑塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • JavaScript jquery及AJAX小結(jié)

    JavaScript jquery及AJAX小結(jié)

    其實(shí)在學(xué)習(xí)之前，就已經(jīng)用上了js，jquery和ajax，不過(guò)當(dāng)時(shí)不清楚這些的區(qū)別，就全都當(dāng)成js來(lái)看，然后別人一說(shuō)jquery，ajax都覺(jué)得好像很高級(jí)，等到自己學(xué)習(xí)的時(shí)候，倒是對(duì)這些更清楚了一點(diǎn)，下面就來(lái)寫(xiě)一下我的總結(jié)
    2016-01-01
  • ES6中Proxy代理用法實(shí)例淺析

    ES6中Proxy代理用法實(shí)例淺析

    這篇文章主要介紹了ES6中Proxy代理用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了Proxy代理的概念、功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2017-04-04
  • js獲取時(shí)間(本周、本季度、本月..)

    js獲取時(shí)間(本周、本季度、本月..)

    js獲取時(shí)間，包括：獲取本周、本季度、本月、上月的開(kāi)端日期、停止日期，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下
    2013-11-11
  • 跟我學(xué)Node.js（四）---Node.js的模塊載入方式與機(jī)制

    跟我學(xué)Node.js（四）---Node.js的模塊載入方式與機(jī)制

    Node.js中模塊可以通過(guò)文件路徑或名字獲取模塊的引用。模塊的引用會(huì)映射到一個(gè)js文件路徑，除非它是一個(gè)Node內(nèi)置模塊。Node的內(nèi)置模塊公開(kāi)了一些常用的API給開(kāi)發(fā)者，并且它們?cè)贜ode進(jìn)程開(kāi)始的時(shí)候就預(yù)加載了。
    2014-06-06
  • threejs太陽(yáng)光與陰影效果實(shí)例代碼

    threejs太陽(yáng)光與陰影效果實(shí)例代碼

    在Threejs中類似于我們現(xiàn)實(shí)世界,物體顯示的顏色是由物體本身的顏色及光照的顏色相互疊加而得到的,這篇文章主要給大家介紹了關(guān)于threejs太陽(yáng)光與陰影效果的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • JavaScript中的偏函數(shù)你理解了嗎

    JavaScript中的偏函數(shù)你理解了嗎

    JavaScript中的偏函數(shù)（Partial?Function）是指一個(gè)函數(shù)，它是由另一個(gè)函數(shù)通過(guò)固定一些參數(shù)而得到的，從而產(chǎn)生了一個(gè)新的函數(shù)，本文主要來(lái)和大家聊聊偏函數(shù)的原理與使用，希望對(duì)大家有所幫助
    2023-05-05
  • JS判斷Android、iOS或?yàn)g覽器的多種方法(四種方法)

    JS判斷Android、iOS或?yàn)g覽器的多種方法(四種方法)

    這篇文章主要介紹了JS判斷Android、iOS或?yàn)g覽器的多種方法(四種方法),需要的朋友可以參考下
    2017-06-06
  • Bootstrap多級(jí)菜單的實(shí)現(xiàn)代碼

    Bootstrap多級(jí)菜單的實(shí)現(xiàn)代碼

    這篇文章主要介紹了Bootstrap多級(jí)菜單的簡(jiǎn)單實(shí)現(xiàn)代碼,需要的朋友可以參考下
    2017-05-05
  • 最全正則表達(dá)式總結(jié)：驗(yàn)證QQ號(hào)、手機(jī)號(hào)、Email、中文、郵編、身份證、IP地址等

    最全正則表達(dá)式總結(jié)：驗(yàn)證QQ號(hào)、手機(jī)號(hào)、Email、中文、郵編、身份證、IP地址等

    這篇文章主要介紹了最全正則表達(dá)式：驗(yàn)證QQ號(hào)、手機(jī)號(hào)、Email、中文、郵編、身份證、IP地址等，通過(guò)語(yǔ)法介紹作用表達(dá)式等詳細(xì)解釋了正則表達(dá)式的使用，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。
    2017-08-08

最新評(píng)論