Question

点击一张图片，然后将一张盒子打开以复制相关代码？

Wolfram的参考网站有这个功能，如何将其实现到我的Github页面？或者类似的东西？（JS代码？）

任何现在的人的页面，主题？

http://reference.wolfram.com/mathematica/ref/Part.html

enter image description here

Answer 1

您可以看到我的说明here

的结果

这个效果完全没有javascript，保持代码非常简单。

我们必须将图像和代码包装在一个容器中，以便我们知道哪一个去哪里。我建议使用<figure>元素，因为正是这个因素thought。然后我们可以在一个不错的<figcaption>元素中包装我们的代码示例，解释和诸如此类的东西。

我说代码示例应该在<textarea>中，因为它已经预先格式化，具有等宽字体，最重要的是可以完全选择使用strg进行复制+ a

所以我们有以下结构：

<figure>
    <img />
    <figcaption>
        <textarea />
    </figcaption>
</figure>

然后我们可以使用CSS隐藏<figcaption>，因此默认情况下它不可见

figure figcaption {
    display: none;
}

现在，我们如何让它可见？有一个称为tabindex的整洁，非常少用的功能，它允许我们通过键盘或鼠标制作单个html元素和＃34; focussable＆＃34;通过将tabindex设置为0，元素将插入页面的常规选项卡流中。通过将tabindex设置为-1，该项目是可单击的，但不能通过键盘进行聚焦。

因此我们在所有图元素上设置了-1的tabindex：

<figure tabindex="-1">
</figure>

现在，通过单击图像，可以给出整个图形元素的焦点。我们可以使用它来显示CSS框：

figure:focus figcaption {
    display: block;
}

这几乎已经是我们想要的了，只有当我们点击<textarea>时，它才会获得焦点，并且它会再次消失，因为一次只能将一个项目聚焦在一个页面上。

因此，我们可以添加以下CSS，当我们将鼠标悬停在它上面时，它会继续向我们展示：

figure figcaption:hover {
    display: block;
}

默认情况下，焦点元素会在某些浏览器中显示出轮廓。在你的情况下，我的某种程度上是丑陋的，所以我们可以用CSS将其全局关闭：

*:focus {
    outline: none;
}

然后你只需按照你希望的样子设置样式，定位它们，然后你就完成了。

我构建了一个小example，您可以在其中查看代码。看看吧。图片只是来自Lorem Pixel的示例图片，代码示例来自红宝石主页。

这里是我的示例的代码（只有一些样式，所以你也可以看到一个例子）：

<强> HTML

<figure class="codeImage" tabindex="-1">
    <img src="http://lorempixel.com/400/200/" />
    <figcaption>
        Some sample code, maybe with some explanation:
        <textarea>
# The Greeter class
class Greeter
  def initialize(name)
    @name = name.capitalize
  end

  def salute
    puts "Hello #{@name}!"
  end
end

# Create a new object
g = Greeter.new("world")

# Output "Hello World!"
g.salute
        </textarea>
    </figcaption>
</figure>

<figure class="codeImage" tabindex="-1">
    <img src="http://lorempixel.com/400/200/" />
    <figcaption>
        Some other code smaple, maybe with some explaination:
        <textarea>
# Output "I love Ruby"
say = "I love Ruby"
puts say

# Output "I *LOVE* RUBY"
say['love'] = "*love*"
puts say.upcase

# Output "I *love* Ruby"
# five times
5.times { puts say }

# Create a new object
g = Greeter.new("world")

# Output "Hello World!"
g.salute
        </textarea>
    </figcaption>
</figure>

<强> CSS

/**
 * Example for images with copyable code sample on click
 */
*:focus {
    outline: none;
}

figure {
    box-sizing: border-box;
    width: 440px;
    height: 250px;
    padding: 20px;
    display: inline-block;
    margin: 20px;
    border: 1px solid #333;
    color: #333;
    background-color: #ccc;
    position: relative;
    z-index: 1;
}

figure figcaption {
    box-sizing: border-box;
    border: 1px solid #333;
    background-color: white;
    position: absolute;
    top: 70px;
    left: 0; 
    display: none;
    z-index: 2;
    width: 440px;
    padding: 10px;
}

figure figcaption textarea {
    width: 400px;
    min-height: 200px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

figure:focus figcaption {
    display: block;
}

figure figcaption:hover {
    display: block;
}

Answer 2

这就是我所做的@HyperGroups。但只是一个示例，您可以根据您的情况进行修改。特别是你会展示的文字。我建议使用AJAX。

我使用jquery对话框弹出窗口。以及接收参数的函数。

<强> HTML

<div id="popup"></div> ....

<强>的jQuery

function show_popup(particular_id){....

<强> CSS

img{ display: inline-b...

Open this fiddle查看结果。

如何让人们点击图像并复制我的GIthub页面中的相关代码？

2 个答案: