Question

有没有办法实施Google反馈功能as shown here？我们可以使用CSS使网站略显黑屏，但我们如何在特定界面上绘制一个矩形，如突出显示某些文本或错误。我们可以使用像sprite cow这样的概念，用于突出特定图像link上的矩形。欢迎任何想法和来源。

由于

Answer 1

最简单的方法是，只需要在页面上拖动鼠标时创建一个div。

我怀疑谷歌是这样做的：

在整个页面上绘制一个略微暗淡的div（“调光器”）
当用户点击并拖动调光器时，他们将它分成多个div，如下所示：
```
### | ## | ###
----+----+----
### |    | ###
----+----+----
### | ## | ###
```
在上文中，中心区域是用户拖动的区域
中心区域现在是空的，您可以通过它看到该网站，因为调光器分为8个较小的div。
当用户按住鼠标按钮时，脚本会不断调整分割调光器div的大小以适应用户拖动的矩形区域。

（它也可能省略了我在图中包含的额外div，因此它只有一个div，下面有一个div，因为没有它们就可以使用矩形）

Answer 2

在所有浏览器上运行的示例代码，只需用鼠标点击绘制矩形，但在chrome中点亮一些突出显示，没有找到任何解决方案：-C ....

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Draw on Web</title>
<style type="text/css">
.square {
        border: 3px solid #FF0000;
        position: absolute;
}
.black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.1;
            opacity:.10;
            filter: alpha(opacity=10);
        }
.white_content {
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            padding: 16px;
            border: 16px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
</style>
<script type="text/JavaScript">
    var d;
    var posx;
    var posy;
    var initx=false;
    var inity=false
    function getMouse(obj,e){
        posx=0;
        posy=0;
        var ev=(!e)?window.event:e;//Moz:IE
        if (ev.pageX){//Moz
            posx=ev.pageX+window.pageXOffset;
            posy=ev.pageY+window.pageYOffset;
        }
        else if(ev.clientX){//IE
            posx=ev.clientX+document.body.scrollLeft;
            posy=ev.clientY+document.body.scrollTop;
        }
        else{
            return false
        }//old browsers
        obj.onmousedown=function(){
            initx=posx; inity=posy;
            d = document.createElement('div');
            d.className='square'
            d.style.left=initx+'px';d.style.top=inity+'px';
            //d.style.background='#434343';
            document.getElementsByTagName('body')[0].appendChild(d)
        }
        obj.onmouseup=function(){initx=false;inity=false;}
            if(initx){
            d.style.width=Math.abs(posx-initx)+'px';d.style.height=Math.abs(posy-inity)+'px';
            d.style.left=posx-initx<0?posx+'px':initx+'px';
            d.style.top=posy-inity<0?posy+'px':inity+'px';
        }
    }

    document.onmousemove=function(event){
    getMouse(document,event);
    }
</script>
</head>
<body>
<FORM METHOD=POST ACTION="mailto:someone@$nailmail.com" ENCTYPE="text/plain">
<table border=0 cellspacing=0 cellpadding=2>
<tr>
<td colspan=2>
<font size=2 face="arial" color="#000000">
<INPUT type="text" name=URL size=17 value="http://"> :Your URL<BR>
<INPUT type="text" name=user size=17> :Your Username<BR>
<INPUT type="text" name=email size=17> :Your E-mail
</font>
</td>
</tr>
<tr>
<td>
<font size=1 face="arial" color="#000000">
<INPUT name=subscribe type=radio value="yes" CHECKED> subscribe<BR>
<INPUT name=subscribe type=radio value="no"> unsubscribe<BR>
</font>
</td>
<td>
<SELECT name="choices" size=1>
<OPTION selected> OPTIONS
<OPTION> OPTION 1
<OPTION> OPTION 2
<OPTION> OPTION 3
<OPTION> OPTION 4
<OPTION> OPTION 5
</SELECT>
</td>
</tr>
<tr>
<td colspan=2>
<font size=1 face="arial" color="#000000">
<INPUT type=checkbox name="html" value="sendme" CHECKED>
i can recive email as html<BR>
<INPUT type=checkbox name="receipt" value="sendme">
send me a recipt for this email<BR>
</font>
<TEXTAREA cols=20 rows=10>
Hey !
what do you think of the form?

cool huh?
</TEXTAREA><br>
<center>
<INPUT NAME="redirect" TYPE="hidden" VALUE="index.html">
<INPUT NAME="NEXT_URL" TYPE="hidden" VALUE="index.html">
<INPUT type=submit value=Send>
<INPUT type=reset value="Clear">
</center>
</td></tr></table>
</FORM>
&nbsp;
</body>
</html>

Answer 3

我最近问自己这个问题，当通过Chrome调试器查看它时，看起来他们正在使用一些技术，这些技术比仅仅将屏幕划分为突出显示和未突出显示的区域更为先进。

首先要注意的是谷歌使用5个iframe来实现他们的反馈系统。

google-feedback-mask-frame ：这只用于面具，它覆盖整个屏幕。我不确定他们为什么选择使用整个iframe。但它的目的是确保您不要在反馈模式下点击任何页面链接

google-feedback-screenshot-frame ：这是我怀疑真正的魔法发生的地方。它包含您正在查看的页面的副本，但包含一些专有的HTML标记（<gft></gft>），以便脚本知道可突出显示内容的位置（图像，文本，链接等）

google-feedback-feedback-frame ：它包含突出显示区域的控件以及整个窗口小部件的X按钮。

为了实现效果，谷歌实际上确实使用了像@Jani Hartikainen所建议的一些部分。在下面的屏幕截图中，您可以看到，当您有多个选择时，需要创建相当多的div以适应效果。

enter image description here

我确信有一个非常复杂的算法来确定所有div的去向，但这是什么让软件开发有趣？

google-feedback-proxy-frame ：有你在右下方看到的控件。

google-feedback-render-frame ：这个有点神秘，它包含的是一个名为render_frame.js的脚本，这个脚本显然是混淆不清的。

总之，使用部分是谷歌的方式，但有更多的魔力允许他们自动突出显示链接和图像。如果您发现更多我真的很感兴趣，请告诉我！

Answer 4

您也可以使用Canvas元素执行此操作。

Answer 5

jQuery Tools有一个很好的小工具，叫做"Expose"，几个月前我就用它了，它对我来说很有用......简单，可扩展，而且只是有效。

如何在网站上绘制矩形以突出显示？

5 个答案: