2. 程式人生 > 其它 >拖動登入框 HTML+CSS+js

拖動登入框 HTML+CSS+js

阿新 • • 發佈：2021-02-11

技術標籤：筆記javascriptcsshtml

先上效果

在這裡插入圖片描述

程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖動登入框</title>
    <Style>
 

        * {
            margin: 0px;
            padding: 0px;
        }
        a {
            color: black;
            text-decoration: none;
        }
        .one {
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height
 
: 30px;
        }
        .login {
            display: none;
            position: fixed;
            width: 512px;
            height: 280px;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index
 
: 999;
            transform: translate(-50%,-50%);
        }
        .title {
            position: relative;
            height: 40px;
            width: 100%;
            line-height: 40px;
            font-size: 18px;
            text-align: center;
            cursor: move;
        }
        .title a{
            position: absolute;
            font-size: 12px;
            top: -15px;
            right: -15px;
            width: 30px;
            height: 30px;
            border: 1px solid #666;
            border-radius: 15px;
            text-align: center;
            line-height: 30px;
            background-color: white;
        }
        .con {
           margin-top: 20px;
        }
        .login-input input {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb solid 1px;
            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;
        }
        .bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }
        .button a {
            display: block;
        }
        .button {
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }

    </Style>
</head>
<body>
    <div class="one"><a href="javascript:;">點選，彈出登入框</a></div>
    <div class="login">
        <div class="title">登入會員
            <span><a href="javascript:;" id="close">關閉</a></span>
        </div>
        <div class="con">
            <div class="login-input">
                <label>使用者名稱:</label>
                <input type="text" placeholder="請輸入使用者名稱" name="" id="name">
            </div>
            <div class="login-input">
                <label>登入密碼:</label>
                <input type="text" placeholder="請輸入登入密碼" name="" id="code">
            </div>
            <div class="button">
                <a href="javascript:;">登入會員</a>
            </div>
        </div>
    </div>
    <div class="bg"></div>
    <script>
        var one = document.querySelector('.one');
        var login = document.querySelector('.login');
        var bg = document.querySelector('.bg');
        //點選彈出背景和登入框
        one.addEventListener('click',function(){
            login.style.display = 'block';
            bg.style.display = 'block';
        })
        //點選關閉，隱藏背景和登入框
        var close = document.querySelector('#close');
        close.addEventListener('click',function(){
            login.style.display = 'none';
            bg.style.display = 'none';
        })
        var title = document.querySelector('.title');
        //拖拽事件
        title.addEventListener('mousedown',function(e){
            //滑鼠按下時，獲取滑鼠在盒子內的座標
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            console.log(x);
            console.log(y);
            //滑鼠移動時，把滑鼠在頁面中的座標減去滑鼠在盒子內的座標就是left和top值
            document.addEventListener('mousemove',move);
            function move(e){
                login.style.left = e.pageX - x +'px';//返回值不帶單位
                login.style.top = e.pageY - y + 'px';
            }
            //滑鼠彈起，事件移除
            document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move);
            })
        })
    </script>
</body>
</html>

相關推薦

拖動登入框 HTML+CSS+js

技術標籤：筆記javascriptcsshtml 先上效果 程式碼 <!DOCTYPE html> <html lang="en">

js 擬寫登入頁 可以拖動登入框

<!DOCTYPE html> <html> <head lang=\"en\"> <meta charset=\"UTF-8\"> <title></title>

JavaScript實現彈出式可拖動登入框

本文例項為大家分享了實現彈出式可拖動登入框的具體程式碼，供大家參考，具體內容如下

JS實現拖動模糊框特效

本文例項為大家分享了JS實現拖動模糊框特效的具體程式碼，供大家參考，具體內容如下

原生JS實現可拖拽登入框

本文分享一個用原生實現的可拖拽登入框，效果如下： 實現的程式碼如下： <!DOCTYPE html>

基於html+css+js實現簡易計算器程式碼例項

使用html+css+js實現簡易計算器， 效果圖如下： html程式碼如下 <!DOCTYPE html> <html lang=\"en\">

04 Web 相關知識-HTML/CSS/JS

本小節會將會介紹前端的相關基礎知識，這些是後面 Django 的模板系統中必要的基礎知識。我們會在開發的 Django 專案中製作一些簡單的頁面，需要用到這裡的內容。

jQuery實現滑鼠拖拽登入框移動效果

本文例項為大家分享了jQuery滑鼠拖拽登入框移動的具體程式碼，供大家參考，具體內容如下

html CSS JS入門

title: html/JS/CSS入門 tags: html JavaScript CSS 入門 categories: html abbrlink: 44864 date: 2020-03-05 09:19:59

❤唯美滿天星❤ html+css+js炫酷3D相簿(含音樂/可自定義文字)程式設計師表白必備

元旦節快到了，在跨年夜前夕.是不是要給女朋友或者正在追求的妹子一點小驚喜呢，今天這篇部落格就分享下前端程式碼如何實現3D立體動態相簿。趕緊學會了，來製作屬於我們程式設計師的浪漫吧！

HTML+CSS+JS學習筆記(日更)

1、h1 h2 h3 ... h6 對應六個標題2、開頭加<!DOCTYPE html> 是html 5 的定義3、所有內容都在<html> 內， 裡面有head和body4、<p> 定義段落，在文字後加東西，就是加在後面，而對段落加東西會另起一

兩邊模糊輪播圖效果 html+css+js

技術標籤：前端html+css的入門常見效果csshtml前端不會播的輪播圖 先看效果： 輪播圖做法有很多，效果也有很多。下面是一種簡單的兩邊圖片模糊，中間圖片放大的輪播圖效果。滑鼠點選左邊或右邊的圖片後，它們會移

基於HTML/CSS/JS微信公眾號展示頁面模板

技術標籤：HTML好玩的簡單專案htmljavascript 首先看一下成品 演示頁面 https://pai-daxing1.github.io/weixin/

半個月學習HTML CSS JS基礎知識總結下（內涵JS）

技術標籤：javascript 從基本的程式設計知識，到用HTML,CSS配合JS實現動態頁面 基礎知識

實現簡易版德州撲克|學習麻瓜程式設計以專案為導向入門前端 HTML+CSS+JS

技術標籤：csshtmljqueryjs 實現簡易版德州撲克|學習麻瓜程式設計以專案為導向入門前端 HTML+CSS+JS

html+css+js實現canvas跟隨滑鼠的小圓特效原始碼

效果（原始碼在最後）： 實現： 1.定義標籤： <h1>北極光之夜</h1> <canvas id=\"draw\" style=\" position: fixed; display: block;\">

HTML+CSS+JS製作一個立體感藍色簡約動態時鐘

HTML+CSS+JS製作一個立體感藍色簡約動態時鐘 HTML+CSS+JS製作一個藍色簡約動態時鐘

短視訊帶貨系統，HTML+CSS+JS實現宇宙星球旋轉動畫特效

短視訊帶貨系統，HTML+CSS+JS實現宇宙星球旋轉動畫特效主要程式碼實現：css樣式：

html+css+js實現別踩白板小遊戲

目錄背景簡介一、思路分析二、頁面搭建2.1 HTML層2.2 層2.3 層2.3.1獲取元素2.3.2建立每一行div元素2.3.3點選事件函式封裝2.3.4 方塊移動函式封裝2.3.5 遊戲開始三、總結背景簡介

HTML+CSS+JS製作一個灰白色簡約時鐘

HTML+CSS+JS製作一個灰白色簡約時鐘，這次借鑑了網路上的程式碼，利用JS動態建立元素，減少html語句的數量，也便於與vue、react等語言進行結合。