草庐IT

javascript - 缩放后的绝对位置

coder 2023-08-04 原文

我有带有 class="myDiv" 的 div。我需要执行以下逻辑:鼠标悬停时，我想在 div 中间显示一个弹出窗口。

为此，我有以下内容:

$(".myDiv").mouseover(function () {
  positionDiv($(this).position().left + $(this).width() / 2, $(this).position().top + $(this).height() / 2);
});

function positionDiv(xPosition ,yPosition ) {
  $("#popupWindow").css("left", xPosition + "px");
  $("#popupWindow").css("top", yPosition + "px");
  $("#popupWindow").show();
}

CSS:

.popupWindow{
  position:absolute;
  width:313px;
  height:383px;
  display:none;
}

这会在鼠标悬停时将弹出窗口定位在 div 的中间。此时一切正常。

但是，如果网站被放大(使用浏览器缩放功能)，位置就会变得困惑。弹出窗口不再出现在 myDiv 的中间。

知道可能是什么问题吗？

编辑:

有关更多信息，如果它已创建并且我对其进行了缩放，则很好。但是当我将鼠标移到另一个 myDiv 时，新的弹出窗口出现在一个奇怪的位置。 Div 的 left 和 top 属性搞乱了。

最佳答案

你不需要 JS:

http://jsfiddle.net/coma/6VUpS/1/

关键是玩CSS，避免JS计算。容器 div (myDiv) 应为position: relative，弹出窗口必须位于内部且position: absolute，顶部和左侧为 50%，并使用负边距使其居中( http://www.css-101.org/negative-margin/06.php ).

尽量避免使用 JS 以获得视觉效果，只有 CSS 才能确保正确的位置，即使在缩放时也是如此，因为它是由浏览器呈现的。

HTML

<div class="myDiv">
    Hi!
    <div class="popupWindow">you are welcome!</div>
</div>

CSS

div.myDiv {
    padding: 10px;
    background-color: #eee;
    margin: 50px 0;
    position: relative;
}

div.popupWindow {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -100px;
    width: 200px;
    line-height: 100px;
    background-color: #111;
    color: #fff;
    text-align: center;
    display: none;
    pointer-events: none;
}

div.myDiv:hover > div.popupWindow {
    display: block;
}

使用复选框单击/点击/切换弹出窗口和一些淡入的奖励轨道:

http://jsfiddle.net/coma/6VUpS/3/

更多黑客:

http://jsfiddle.net/coma/6VUpS/

更复杂的例子:

http://jsfiddle.net/coma/dHTHG/

关于javascript - 缩放后的绝对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16321456/

javascript绝对codestrongpopupWindowjqueryhtmlcss

有关javascript - 缩放后的绝对位置的更多相关文章

  1. ruby - 正则表达式在哪个位置失败？ - 2

    我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案 一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2

    我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1

  4. ruby - 变量赋值后的 if 语句 - 有多常见？ - 2

    我最近与一位同事讨论了以下Ruby语法:value=ifa==0"foo"elsifa>42"bar"else"fizz"end我个人并没有看到太多这种逻辑，但我的同事指出，这实际上是一种相当普遍的Rubyism。我试着用谷歌搜索这个主题，但没有找到任何文章、页面或SO问题来讨论它，这让我相信这可能是一种非常实际的技术。然而，另一位同事发现语法令人困惑，而是将上面的逻辑写成这样:ifa==0value="foo"elsifa>42value="bar"elsevalue="fizz"end缺点是value=的重复声明和隐式elsenil的丢失，如果我们想使用它的话。这也感觉它与Ruby

  5. ruby - Heroku production.log 文件位置 - 2

    我想在heroku.com上查看我的应用程序日志的内容，所以我关注了thisexcellentadvice并拥有我所有的日志内容。但是我现在很想知道我的日志文件实际在哪里，因为“log/production.log”似乎是空的:C:\>herokuconsoleRubyconsoleforajpbrevx.heroku.com>>files=Dir.glob("*")=>["public","tmp","spec","Rakefile","doc","config.ru","app","config","lib","README","Gemfile.lock","vendor","sc

  6. ruby - 在 Ruby 中查找多个正则表达式匹配的模式和位置 - 2

    这应该是一个简单的问题，但我找不到任何相关信息。给定一个Ruby中的正则表达式，对于每个匹配项，我需要检索匹配的模式$1、$2，但我还需要匹配位置。我知道=~运算符为我提供了第一个匹配项的位置，而string.scan(/regex/)为我提供了所有匹配模式。如果可能，我需要在同一步骤中获得两个结果。 最佳答案 MatchDatastring.scan(regex)do$1#Patternatfirstposition$2#Patternatsecondposition$~.offset(1)#Startingandendingpo

  7. ruby-on-rails - 尝试打开 .gitignore 以在文本编辑器中对其进行编辑，但在 OS X Mountain Lion 上找不到文件位置 - 2

    我使用“newapp_name”创建了一个新的Rails应用程序，我正在尝试编辑.gitignore文件，但在我的应用程序文件夹中找不到它。我在哪里可以找到它？我安装了Git。 最佳答案 .gitignore位于项目的root中，而不是app子目录中。首先打开终端并进入您的目录。您需要使用ls-a来显示stash文件。然后使用打开.gitignore 关于ruby-on-rails-尝试打开.gitignore以在文本编辑器中对其进行编辑，但在OSXMountainLion上找不到文件位

  8. ruby-on-rails - 在 Rails 中存储(结构化)配置数据的位置 - 2

    对于我正在编写的Rails3应用程序，我正在考虑从本地文件系统上的XML、YAML或JSON文件中读取一些配置数据。重点是:我应该把这些文件放在哪里？Rails应用程序中是否有用于存储此类内容的默认位置？附带说明一下，我的应用程序部署在Heroku上。 最佳答案 我经常做的是:如果文件是通用配置文件:我在目录/config中创建一个YAML文件，每个环境有一个上层key如果我为每个环境(大项目)创建一个文件:我为每个环境创建一个YAML并将它们存储在/config/environments/然后我在加载YAML的地方创建了一个初始化

  9. Ruby:数组中的下一个/上一个值，循环数组，数组位置 - 2

    假设我有一个没有特定顺序的随机数数组。假设这些是参加马拉松比赛的人的ID#，他们按照完成的顺序添加到数组中，例如:race1=[8,102,67,58,91,16,27]race2=[51,31,7,15,99,58,22]这是一个简化且有些做作的示例，但我认为它传达了基本思想。现在有几个问题:首先，我如何获得特定条目之前和之后的ID？假设我正在查看运行者58，我想知道谁在他之前和之后完成了比赛。race1,runner58:previousfinisher=67,nextfinisher=91race2,runner58:previousfinisher=99,nextfinishe

  10. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

随机推荐