分类 HTML5 下的文章

MDUI 实现右击菜单弹出菜单栏

更新记录

03/17 00:12:解决滚动页面后右击菜单栏出现在顶部。解决办法将 e.clientY 换成 e.pageY

在线预览:https://nowtime.cc/mdui/contextmenu.html

核心 JavaScript 代码:

    var $$ = mdui.JQ;
    //监听鼠标右击事件 / 移动端长按事件
    $$(document).on('contextmenu', function (e) {
        // console.log(e);

        //0:移动端长按(iOS 测试未通过)
        //2:电脑端右键
        if(e.button === 2 || e.button === 0) {
            e.preventDefault();//阻止冒泡,阻止默认的浏览器菜单

            //(修改了这里)鼠标点击位置,相对于页面
            var _x = e.pageX,
                _y = e.pageY;

            let $div = $$("<div></div>").css({
                position: 'absolute',
                top: _y+'px',
                left: _x+'px',
            });
            $$('body').append($div);//创建临时DOM

            // anchorSelector 表示触发菜单的元素的 CSS 选择器或 DOM 元素
            // menuSelector 表示菜单的 CSS 选择器或 DOM 元素
            // options 表示组件的配置参数,见下面的参数列表
            // 完整文档列表:https://doc.nowtime.cc/mdui/menu.html
            var inst = new mdui.Menu($div, '#menu');
            inst.open();//打开菜单栏
            $div.remove();//销毁创建的临时DOM
        }
    });

完整 HTML代码

- 阅读剩余部分 -

纯 CSS 实现的 时间线,也支持使用 JavaScript 动态生成

Time-line

纯 CSS 实现的 时间线,也支持使用 JavaScript 生成。
DEMO | 演示
Time-line 预览图

HTML 渲染

你只需要根据 timeLine.html 代码结构进行简单的修改即可实现

JacaScript 渲染

你需要将 timeLine.html 103 行 取消注释,然后根据 timeLine.js 注释修改

timeLine.js 里 data变量 数据格式如下:

[
  {
    "title":"现在网",
    "link":"https://nowtime.cc",
    "time":"1578718860"
  },
  {
    "title":"ffmpeg 使用方法合集",
    "link":"https://nowtime.cc/software/834.html",
    "time":"1578725484"
  }
]

字段解释:

title 时间线显示的内容

link 点击后跳转的链接

time 该内容发布的时间,注意是 秒级时间戳

鸣谢

部分 CSS 样式参考的是 https://www.ihewro.com/archives.html

LICENSE

MIT LICENSE

更改鼠标样式 / CSS cursor 属性

请把鼠标移动到单词上,可以看到鼠标指针发生变化:

代码在最后面

Auto(自动)

Crosshair(十字线)

Default(默认,无变化)

Pointer(指针)

Move(移动)

e-resize(左右 调整大小)

ne-resize(右上左下 调整大小)

nw-resize(左上右下 调整大小)

n-resize(上下 调整大小)

se-resize

sw-resize

s-resize

w-resize

text

wait

help

<span style="cursor:auto">Auto</span><br />
<span style="cursor:crosshair">Crosshair</span><br />
<span style="cursor:default">Default</span><br />
<span style="cursor:pointer">Pointer</span><br />
<span style="cursor:move">Move</span><br />
<span style="cursor:e-resize">e-resize</span><br />
<span style="cursor:ne-resize">ne-resize</span><br />
<span style="cursor:nw-resize">nw-resize</span><br />
<span style="cursor:n-resize">n-resize</span><br />
<span style="cursor:se-resize">se-resize</span><br />
<span style="cursor:sw-resize">sw-resize</span><br />
<span style="cursor:s-resize">s-resize</span><br />
<span style="cursor:w-resize">w-resize</span><br />
<span style="cursor:text">text</span><br />
<span style="cursor:wait">wait</span><br />
<span style="cursor:help">help</span>