最新文章專題視頻專題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

模擬windows平臺(tái)的上下文菜單效果代碼_javascript技巧

來(lái)源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 20:58:16
文檔

模擬windows平臺(tái)的上下文菜單效果代碼_javascript技巧

模擬windows平臺(tái)的上下文菜單效果代碼_javascript技巧:代碼演示: 無(wú)標(biāo)題文檔 //= w) event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w; top = (event.clientY + h 單擊右鍵看效果~ 撤銷 重做 復(fù)制 粘貼 大小寫轉(zhuǎn)換 回車 拼寫檢查 新建 自定義 圖形
推薦度:
導(dǎo)讀模擬windows平臺(tái)的上下文菜單效果代碼_javascript技巧:代碼演示: 無(wú)標(biāo)題文檔 //= w) event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w; top = (event.clientY + h 單擊右鍵看效果~ 撤銷 重做 復(fù)制 粘貼 大小寫轉(zhuǎn)換 回車 拼寫檢查 新建 自定義 圖形

代碼演示:

[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
結(jié)構(gòu):
代碼如下:


  • 撤銷

  • 重做

  • 復(fù)制

  • 粘貼

  • 大小寫轉(zhuǎn)換

  • 回車

  • 拼寫檢查

  • 新建

  • 自定義

  • 圖形選項(xiàng)

  • 關(guān)閉




  • code是這樣:
    代碼如下:
    function $(id) {
    return document.getElementById(id);
    };

    var EventUnit = {
    addHandler: function(element, type, handler) {//添加事件處理程序
    if(element.addEventListener) {
    element.addEventListener(type, handler, false);
    } else if(element.attachEvent) {
    element.attachEvent('on' + type, handler);
    } else {
    element['on' + type] = handler;
    };
    },
    getEvent: function(event) {
    return event ? event : window.event;
    },
    preventDefault: function(event) {//取消事件默認(rèn)動(dòng)作
    if(event.preventDefault) {
    event.preventDefault();
    } else {
    event.returnValue = false;
    };
    }
    }

    EventUnit.addHandler(window, 'load', function() {
    var wrap = $('wrap');
    var menu = $('menu');
    var menuStyle = menu.style.display;
    var x = wrap.offsetLeft + wrap.clientWidth, y = wrap.offsetTop + wrap.clientHeight;
    var w = 0, h = 0;
    var left = 0, top = 0;

    EventUnit.addHandler(wrap, 'contextmenu', function(event) {
    event = EventUnit.getEvent(event);
    EventUnit.preventDefault(event);

    menu.style.display = 'block';
    w = menu.clientWidth;
    h = menu.clientHeight;
    left = (x - event.clientX >= w) ? event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w;
    top = (event.clientY + h <= y) ? event.clientY - wrap.offsetTop : event.clientY - wrap.offsetTop - h;
    menu.style.left = left + 'px';
    menu.style.top = top + 'px';
    });

    EventUnit.addHandler(document, 'click', function() {
    menu.style.display = menuStyle;
    });
    });

    聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    模擬windows平臺(tái)的上下文菜單效果代碼_javascript技巧

    模擬windows平臺(tái)的上下文菜單效果代碼_javascript技巧:代碼演示: 無(wú)標(biāo)題文檔 //= w) event.clientX - wrap.offsetLeft : event.clientX - wrap.offsetLeft - w; top = (event.clientY + h 單擊右鍵看效果~ 撤銷 重做 復(fù)制 粘貼 大小寫轉(zhuǎn)換 回車 拼寫檢查 新建 自定義 圖形
    推薦度:
    標(biāo)簽: 技巧 Windows js
    • 熱門焦點(diǎn)

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top