JavaScript：鼠標拖拽效果

阿新 • • 發佈：2019-04-13

NPU 模式 mask 便宜 dde scale :hover 是否 --

（之前的那個模板方法模式實在沒搞懂...等幾天再去研究8）

預覽效果：

技術分享圖片

限制拖動範圍在視口內、調整窗口時自動居中...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" 
>
    <title>Document</title>
    <style>
        body{
            background-image: url("images/baidu_demo.png");
            background-repeat: no-repeat;
            background-position: top center;
            background-color: #fff;
            /* 註意這個作用 */
            padding 
: 0px;
            margin: 0px;
            font-size: 12px;
            /* font-family: "微軟雅黑"; */
        }
        .ui-dialog{
            display: none;
            width: 380px;
            height: auto;
            position: absolute;
            z-index: 1000;
            top: 0px;
            left 
: 0px;
            border: 1px solid #d5d5d5; 
            background-color: #fff;
        }
        .ui-dialog-title{
            height: 48px;
            line-height: 48px;
            padding:0px 20px;
            color: #535353;
            font-size: 16px;
            background: #f5f5f5;
            border-bottom: 1px solid #efefef;
            cursor: move;
            user-select: none;
        }
        .ui-dialog-content{
            padding: 15px 20px;
        }
        .ui-dialog a{
            text-decoration: none;
        }
        .ui-dialog-closeButton{
            display: block;
            width: 16px;
            height: 16px;
            position: absolute;
            top: 12px;
            right: 20px;
            background: url("images/close_def.png") no-repeat;
            cursor: pointer;
        }
        .ui-dialog-closeButton:hover{
            background: url("images/close_hov.png");
        }
        .ui-dialog-pt15{
            padding-top: 15px;
        }
        p{
            margin-block-start: 0em;
            margin-block-end: 0em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
        }
        .ui-dialog-l40{
            height: 40px;
            line-height: 40px;
            text-align: right;
        }
        .ui-dialog-input{
            width: 100%;
            height: 40px;
            margin:0px;
            padding: 0px;
            border: 1px solid #d5d5d5;
            font-size: 16px;
            color: black;
            text-indent: 25px;
            outline: none;
        }
        .ui-dialog-input-username{
            background: url("images/input_username.png") no-repeat 2px;
        }
        .ui-dialog-input-password{
            background: url("images/input_password.png") no-repeat 2px;
        }
        .ui-dialog-submit{
            width: 100%;
            height: 50px;
            background: #3b7ae3;
            border:none;
            font-size: 16px;
            color: #fff;
            outline: none;
            text-decoration: none;
            display: block;
            text-align: center;
            line-height: 50px;
        }
        .ui-mask{
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.4;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 900;
            display: none;
        }
        .link{
            text-align: right;
            line-height: 20px;
            padding-right: 40px;
        }
    </style>
</head>
<body>
    <div class="ui-dialog" id="dialog">
        <!-- 標題欄 -->
        <div class="ui-dialog-title" id="dialog-title">
            <a href="javascript:hideDialog();" class="ui-dialog-closeButton"></a>
            <p>登錄通行癥</p>
        </div>
        <!-- 內容區域 -->
        <div class="ui-dialog-content">
            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input placeholder="手機/郵箱/用戶名" type="input" class="ui-dialog-input ui-dialog-input-username">
            </div>
            <div class="ui-dialog-l40 ui-dialog-pt15">
                <input placeholder="密碼" type="input" class="ui-dialog-input ui-dialog-input-password">
            </div>
            <div class="ui-dialog-l40">
                <a href="#">忘記密碼</a>
            </div>
            <div class="ui-dialog-submit">
                <a href="#" class="ui-dialog-submit">登錄</a>
            </div>
            <div class="ui-dialog-l40">
                <a href="#">立即註冊~</a>
            </div>
        </div>
    </div>
    <div class="ui-mask" id="mask" onselectstart="return false"></div>
    <div class="link">
        <a href="javascript:showDialog();">登錄</a>
    </div>
</body>
<script>
    //按下時，標記為可拖動。開始拖動，更新position。松開，標記不可拖動

    //獲取對象
    function getElement(id){
        return document.getElementById(id);
    };

    //自動居中函數（提示框）
    function autoCenter(el){
        var bodyWidth = document.documentElement.clientWidth;
        var bodyHeight = document.documentElement.clientHeight;
        
        var elWidth = el.offsetWidth;
        var elHeight = el.offsetHeight;

        el.style.left = (bodyWidth-elWidth)/2 + "px";
        el.style.top = (bodyHeight-elHeight)/2 + "px";
    }

    //自動全屏函數（遮罩）
    function furfillBody(el){
        el.style.width = document.documentElement.clientWidth + "px";
        el.style.Height = document.documentElement.clientHeight + "px";
    }


    var mouseOffsetX = 0,
        mouseOffsetY = 0;

    var draggble = false;//是否可拖拽，一會用data-xxx寫

    //在標題欄上按下，計算相對拖拽元素左上角坐標，並標記該元素可拖動
    getElement("dialog-title").addEventListener(‘mousedown‘,function(e){
        console.log(e);
        var e = e || window.event;
        mouseOffsetX = e.pageX - getElement(‘dialog‘).offsetLeft;
        mouseOffsetY = e.pageY - getElement(‘dialog‘).offsetTop;
        draggble = true;
        console.log(mouseOffsetX,mouseOffsetY,draggble);
        //記錄當前鼠標在標題欄中的相對位置
        //註意這裏是整個登陸浮層

    })
    //按下開始移動，先檢查是否已被標記為可拖動，如果是則進行更新（減去第一步中已經獲得的便宜）
    document.onmousemove = function(e){
        var e = e || window.event;
        mouseX = e.pageX;//鼠標當前位置
        mouseY = e.pageY;

        var moveToX = 0,//新位置
            moveToY = 0;
        
        
            if(draggble){
                // console.log(1);
                moveToX = mouseX - mouseOffsetX;
                moveToY = mouseY - mouseOffsetY;

                var pageWidth = document.documentElement.clientWidth;
                var pageHeight = document.documentElement.clientHeight;
                
                var dialogWidth = getElement(‘dialog‘).offsetWidth;
                var dialogHeight = getElement(‘dialog‘).offsetHeight;

                var maxX = pageWidth - dialogWidth;
                var maxY = pageHeight - dialogHeight;

                moveToX = Math.min(maxX , Math.max(0,moveToX) );
                moveToY = Math.min(maxY , Math.max(0,moveToY) );
                
                getElement(‘dialog‘).style.left = moveToX + "px";
                getElement(‘dialog‘).style.top = moveToY + "px";
            }

    }


    //鼠標松開，標記為不可拖動
    //針對於整個document
    document.onmouseup = function(){
        draggble = false;
    }

    function showDialog(){
        getElement(‘dialog‘).style.display = "block";
        getElement(‘mask‘).style.display = "block";
        autoCenter(getElement(‘dialog‘));
        furfillBody(getElement(‘mask‘));
    };
    function hideDialog(){
        getElement(‘dialog‘).style.display = "none";
        getElement(‘mask‘).style.display = "none";
    };


    //窗口改變大小時的事件處理

    window.onresize = function(){
        autoCenter(getElement(‘dialog‘));
        furfillBody(getElement(‘mask‘))
    }
</script>
</html>

JavaScript：鼠標拖拽效果

NPU 模式 mask 便宜 dde scale :hover 是否 -- （之前的那個模板方法模式實在沒搞懂...等幾天再去研究8）預覽效果：限制拖動範圍在視口內、調整窗口時自動居中... <!DOCTYPE html> <html

js 鼠標拖拽效果實現

element width ima ado cti rem clas fun gif 效果：源碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

js實現鼠標的拖拽效果

郵箱 gin start ott borde mouse ora mar mooc 拖拽效果在我們上網的過程中是很常見的，大家都應該在電腦上面登陸過qq吧，當這個qq的登陸框彈出來的時候，我們是可以進行拖動的。這就是一個拖拽效果這是我在慕課網上面看到的，我直接拿過來了，地

Game面板實現鼠標拖拽物體

知新樹寧金峰大家都知道在Unity 場景面板（Scene面板）可以實現拖拽物體。具體操作步驟是變換工具欄選擇“手”的拖拽工具（或者快捷鍵“Q”）之後，直接用鼠標左鍵按住竟可以實現拖拽物體。當然這樣的效果實際上並不是實現了拖拽物體，因為物體的位置是沒有變化的。它實際上就是移動我們的當前場景，看起來在拖拽物體似

element table 實現鼠標拖拽選中

display ntp num carousel 表數據 win 如果 lec 鼠標移動父組件 <template> <div id=‘add‘> <airtable :tableData="

設置zedgraph鼠標拖拽和局部放大屬性轉

視圖 modifier The 步驟 ger each 拖拽我們區域設置zedgraph鼠標拖拽和局部放大屬性轉設置zedgraph鼠標拖拽和局部放大屬性說一下幾個屬性的意義和具體應用: (1)鼠標拖拽顯示區域 PanModifierKeys -&g

JavaScript實現網頁元素的拖拽效果

wid parseint fontsize current ini .net win == oct 以下的頁面中放了兩個div，能夠通過鼠標拖拽這兩個元素到任何位置。實現該效果的HTML頁面代碼例如以下所看到的： <!DOCTYPE html> &

JavaScript實現最簡單的拖拽效果

stop 效果展示 title 另存為 -h 通過沒有軟件 .cn 一、一些無關痛癢的嘮叨拖拽還是挺不錯的一個頁面效果，我個人認為，其生命力在於可以讓用戶自己做一些操作，所謂自定義。例如： ①瀏覽器標簽順序的拖拽切換現在基本上所有的選項卡式的瀏覽器都有順序拖拽切換的

JavaScript 入門練習2：鼠標移入移出改變 div 大小

courier script element 鼠標移出定位 html 標簽 into 相對 lac 有一個位於屏幕正中央的紅色 div 正方形盒子，寬高為200×200像素，鼠標移入（懸停），正方形會變成400×400像素，鼠標移出，正方形恢復200×200像素。使用

JavaScript實現水平進度條拖拽效果

<html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0;

強大的CSS ：實現仿 Windows10 鼠標照亮邊框效果

桌面 header mage 炫酷特效 eve ogr 向量例子 list 安裝最新 Windows 10 update 之後，註意到系統 UI 裏有一個很棒的細節效果，在開始菜單的磁貼裏或者 UWP 風格的設置界面中，元素的高亮邊框是可以感知鼠標的，邊框的高亮部分會跟

js：簡單的拖動效果

p s move ntb rec cti release 樣式 left eve 效果演示：https://jsfiddle.net/dwqs/b5ywws9f/embedded/result/ html: <div class="w

JavaScript基礎鼠標放上觸發事件onmouseover 鼠標移開觸發事件onmouseout

type 感悟 doc 博客 use div true 用途 class 鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。———————————————————————

Java Swing界面編程(25)---事件處理：鼠標事件及監聽處理

鼠標右鍵 util else if this setbounds user swing 事件處理 dem 假設想對一個鼠標的操作進行監聽，假設鼠標按下、松開等。則能夠使用MouseListener接口。 package com.beyole.util; import

canvasn拖拽效果

鼠標 fun brush int eat 初始 ntb 代碼 class canvas拖拽和平時用的js拖拽是有區別的普通的js是設置目標為絕對定位，再根據鼠標的移動來改變left和top的值 canvas是獲得了鼠標的位置，直接在目標點進行重新繪制下面給一個簡單的拖拽

鼠標移入效果

pagex cti flow cross fcc abs use utf find 完整代碼 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t

css3—產品列表之鼠標滑過效果

thumb log closed face max-width overflow code def set <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" />

WPF：鼠標長時間無操作，窗口隱藏

sender mouse his += action win led private res //設置鼠標長時間無操作計時器 private System.Timers.Timer MouseTimerTick = new System.Timers.Time

利用 :before :after偽類實現鼠標懸浮動畫效果

type 兼容 str log 參考 tex 觸發 strong nsf 1、最近在逛網站的時候，想找一下喜歡的鼠標懸浮效果，避免廣告的嫌疑，直接放圖了： 2、在實現的時候，如果在直接使用鼠標hover ,transform,進行過渡，不能達到想要的效果，因為同

菜單欄鼠標經過伸縮效果

doctype width radi pre flow text oct font idt <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

JavaScript：鼠標拖拽效果

相關推薦