0

他の人のウェブページを使って、友達にコンセプトを見せたいです。誰かの Web ページに自分のレイヤーを追加するにはどうすればよいですか? グリースモンキーは機能しますか？

4

3 に答える 3

1

グリースモンキーでこれを行うことができます。div正しいz-indexと または のいずれかをposition:fixed使用して、もう 1 つ を作成する必要がありますposition:absolute。

于 2012-05-07T14:00:17.350 に答える
1

はい、Greasemonkey は、ページ DOM 要素を追加 (または削除、または変更) することでこれを行うことができます。

以下は、スタック オーバーフロー ページに「レイヤーを追加する」スターター スクリプトです。

// ==UserScript==
// @name        _Add a "layer" to a webpage
// @namespace   Stack Overflow
// @include     http://stackoverflow.com/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// ==/UserScript==

$("body").prepend (
      '<div id="gmLayerWrapper">'
    + '<p>All your overflow are belong to us.<br>'
    +   '<img src="http://2.bp.blogspot.com/-hEJb82Ni7V8/TrnNc8Ljj3I/AAAAAAAABG4/Ow2GnJyDo74/s400/UnicornRainbow.jpg"'
    +   ' alt="They\'re everywhere!">'
    + '</p>'
    + '<div id="gmTransparentFilm"></div>'
    + '</div>'
);
$("#gmLayerWrapper").width  ( $(window).width  () )
                    .height ( $(window).height () )
                    ;
//--- Fudge our text width for aesthetics.
$("#gmLayerWrapper p").width  ( $(window).width () / 2 )

GM_addStyle ( (<><![CDATA[
    #gmLayerWrapper {
        margin:                 0;
        padding:                0;
        position:               fixed;
        top:                    0;
        left:                   0;
        min-width:              200px;
    }
    #gmTransparentFilm {
        margin:                 0;
        padding:                0;
        background:             red;
        opacity:                0.7;
        height:                 100%;
        width:                  100%;
        position:               absolute;
        top:                    0;
        left:                   0;
        z-index:                666;
    }
    #gmLayerWrapper p {
        padding:                0.5em 1.5em;
        margin:                 1em auto;
        background:             white;
        border-radius:          2em;
        font-size:              30px;
        line-height:            2.5;
        text-align:             center;
        vertical-align:         middle;
        min-width:              4em;
        position:               relative; /*Required for z-index*/
        z-index:                888;
    }
]]></>).toString () );


それは使用しています：

これを達成するために。

于 2012-05-08T02:30:24.023 に答える
0

Probably the easiest way is to File -> Save As their work and edit the resulting files. You could create a GreaseMonkey script to do so dynamically, but it sounds like a lot of work for a quick hi-5.

于 2012-05-07T14:10:10.647 に答える