Question

我是JQuery的新手并且遇到了一个简单的问题。我想采取下面的标记，并创建一个脚本，将鼠标的较大版本放在img（div中的五个之一）到p，“big”。 “big”中的那个将与最后一个mouseover目标匹配，并将作为链接运行 - 与较小版本相同。

<!doctype html>
    <html>
        <head>
            <meta charset = "UTF-8"/>
            <title>Image Links</title>
        </head>
        <body>
            <p id = "big">

            </p>
            <div id = "links">
                <a href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "150" onmouseover="enlargeCopy();">
                <a href = "https://www. .com "><img id = " " border = "0" alt = " " src=" " width = "200" height = "100">
                <a href = "https://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100">
                <a href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100">
                <a href = "https://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "100">
            </div>
            <script src="jquery-3.1.0.js"></script>
            <script src = "Test 3.js"></script>

        </body>
    </html>

这是我尝试使用的js脚本＆gt;＆lt;。我最接近成功的是让[object Object]多次出现（而不是预期的更大图像）。

//intended to increase the size of imgs in div, and place the larger image at the top of the document

var enlargeCopy = function () {

    var x = $(".links").children("img").css("width", "*=2");
    var x = $(".links").children("img").css("height", "*=2");

    document.getElementById("big").appendChild(document.createTextNode(x));
};

我正在尝试做什么 - 更简洁地解释：

-1。是将鼠标悬停在五个图像锚点中的任何一个上（在html文档的div中）

-2。对于正被鼠标悬停的图像在页面顶部显示为副本（在当前空白的p插槽中）

-3。该副本的宽度是目标

的两倍，是目标

的两倍

-4。复制仍然可以作为链接

Answer 1

如果我从根本上理解你，你想要克隆图像并将其附加到鼠标悬停的某个元素上，对吧？也许你可以使用jQuery的克隆方法：

$('#links a').on('mouseover', function(){
  $(this).clone().appendTo('#big');
  var originalWidth = $(this).find('img').width();
  var originalHeight = $(this).find('img').height();
  $('#big, #big img').css({'width': originalWidth * 2 + 'px', 'height': originalHeight * 2 + 'px'});
});

此外，您应该关闭您的锚标记，例如</a>。

我也让你成为FIDDLE。

Answer 2

这就是我要做的事情：

- 首先为您要使用的五个<a>添加相同的名称。例如：

<a name="exampleLink" href = "http://www. .com/"><img id = " " border = "0" alt = " " src=" .png" width = "100" height = "150" >

- 然后在此名称中添加evenlistener：

$( document ).ready(function() {  
   $('a[name=exampleLink]').mouseover(function() {
         $(this).clone().appendTo($('#big').empty());
   });
});

现在你只需要像你说的那样做最大的img，但我没有时间知道，确定有人可以编辑！

Answer 3

<p>
  <img src="" id="big" style="display: none;"> <!-- empty hidden image -->
</p>
<div id="links">
  <a href="http://google.com">
    <img border="0" alt="1" src="https://codeorigin.jquery.com/jquery-wp-content/themes/jquery/content/books/learning-jquery-4th-ed.jpg" width="100" height="150" />
  </a>
  <a href="http://google.com">
    <img border="0" alt="2" src="https://codeorigin.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-in-action.jpg" width="200" height="100" />
  </a>
  <a href="http://google.com">
    <img border="0" alt="3" src="https://codeorigin.jquery.com/jquery-wp-content/themes/jquery/content/books/jquery-succinctly.jpg" width="100" height="100" />
  </a>
  <a href="http://google.com">
    <img border="0" alt="4" src="https://codeorigin.jquery.com/jquery-wp-content/themes/jquery/images/jq-global-nav.png" width="100" height="100" />
  </a>
</div>


  $('#links a').mouseover(function(){
    var $el = $(this).children('img');
    $('#big')
      .attr('src', $el.attr('src'))
      .width($el[0].naturalWidth * 2)
      .height($el[0].naturalHeight * 2)
      .show();
  });

Answer 4

您需要将选择器修改为$("#links")而不是$(".links") 您修改的功能正在跟随。
var enlargeCopy = function () { var x = $("#links").children("img").css("width", "*=2"); var x = $("#links").children("img").css("height", "*=2"); document.getElementById("big").appendChild(document.createTextNode(x)); };

JQuery选择div中的多个img之一

4 个答案: