页面右上角显示特定内容的功能,每触发一次,如何叠加显示?

12style
  • 38

油猴子划词翻译脚本中设置了显示翻译内容的面板,定义触发后在页面右上角显示,6秒后自动关闭,再次触发后,如何叠加显示在右上角,已显示的依次下移,分别计时6秒后关闭面板,剪切板保留最新复制内容?

生成面板和显示的代码

var timercon;
    function showclipboard(text) {
        server.containerDestroy();// 销毁翻译内容面板
        // 新建翻译内容面板
        var container = server.container();
        container.style.top = 0 + 'px';
        container.style.right = 0 + 'px';
        //container.style.position = 'absolute';
        container.style.position = 'fixed';
        document.body.appendChild(container);
        server.rendered.push(container);

        displaycontainer(text, container);

        clearTimeout(timercon);
        timercon = window.setTimeout(function(){ container.style.display = "none";}, 6000);
    }


    function displaycontainer(text, element) {
        element.innerHTML = text;
        element.style.display = 'block';// 显示结果
        trans = text;
        //任何结果复制到剪切板
        GM_setClipboard(text);
    }



    // 翻译server
    var server = {
        // 存放已经生成的翻译内容面板(销毁的时候用)
        rendered: [],
        // 销毁已经生成的翻译内容面板
        containerDestroy: function () {
            for (var i = this.rendered.length - 1; i >= 0; i--) {
                if (this.rendered[i] && this.rendered[i].parentNode) {
                    this.rendered[i].parentNode.removeChild(this.rendered[i]);
                }
            }
        },
        // 生成翻译结果面板 DOM (此时还未添加到页面)
        container: function () {
            var div = document.createElement('div');
            div.setAttribute('style', '' +
                             'display:none!important;' +
                             'position:absolute!important;' +
                             'font-size:4px!important;' +
                             'overflow:auto!important;' +
                             //'background:#fff!important;' +
                             'background-color:rgba(255,255,255,0.3)!important;' +
                             'font-family:sans-serif,Arial!important;' +
                             'font-weight:normal!important;' +
                             'text-align:left!important;' +
                             'color:#000!important;' +
                             'padding:0.5em 1em!important;' +
                             //'line-height:1.5em!important;' +
                             'border-radius:3px!important;' +
                             'border:1px solid #ccc!important;' +
                             //'box-shadow:4px 4px 8px #888!important;' +
                             'max-width:350px!important;' +
                             'max-height:1216px!important;' +
                             'z-index:2147483647!important;' +
                             '');
            return div;
        }
    };// 翻译server结束
回复
阅读 459
1 个回答
✓ 已被采纳

无非就是外面加个div套起来垂直排列,每次生成的时候插入到队列最前面就行了。
随便写了个例子,可以自己改改或者加点动画。这个用jquery好写,原声有点难受。

<style>
#wrap {
  position:fixed;
  right:0;
  top:0;
  width:300px;
  padding:40px;
}
#wrap div {
  background:red;
  width:100%;
  height:200px;
  margin-bottom:20px;
}
</style>
<body>
  <button id="btn">创建通知</button>
  <div id="wrap"></div>
  <script>
    const wrapDiv = document.getElementById("wrap");
    let count = 1;

    document.getElementById("btn").onclick = e => {
      let height = Math.random()*300 + "px";
      let div = document.createElement('div');
      div.innerHTML = count++;
      let fc = wrapDiv.firstElementChild
      if (fc) wrapDiv.insertBefore(div,fc)
      else wrapDiv.appendChild(div);
      setTimeout(() => {
        div.parentNode.removeChild(div);
      },6000)
    }
  </script>
</body>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏