Question

我有一份产品清单。

<ul>
<li><a href="chair.php">CHAIR</a></li>
<li><a href="table.php">TABLE</a></li>
<li><a href="sofa.php">SOFA</a></li>
<li><a href="bookshelf.php">BOOKSHELF</a></li>
<ul>

在鼠标悬停时，我想在div #preview中显示产品的缩略图。

我不想为每张图片硬编码jquery。相反，我想编写JQuery来获取图像位置并插入DOM。我不知道如何标记HTML以包含图像位置。有什么想法吗？

Answer 1

我建议使用new HTML5 data attributes，如下所示：

<a href="chair.php" data-thumbnail-src="chair.jpg">CHAIR</a>

然后你可以按如下方式设置jQuery代码：

$(function () {
    var $preview = $("#preview");

    $("ul#products a").hover(function () {
        $preview.attr("src", $(this).attr("data-thumbnail-src"));
    }, function () {
        $preview.attr("src", "");
    });
});

在jQuery 1.4.3及更高版本中，我相信$(this).data("thumbnail-src")也可以。

Answer 2

希望这是一个不错的解决方案。我正在使用JQuery Metadata plugin

以下是现场直播的内容：http://jsfiddle.net/giddygeek/VqL65/14/

<强> HTML

<script type="text/javascript" src="https://github.com/jquery/jquery-metadata/raw/master/jquery.metadata.js"></script>
<ul class="pics">
<li class="pic {url:'chair.jpg'}">
    <a href="chair.php">CHAIR</a></li>
<li class="pic {url:'table.jpg'}">
    <a href="table.php">TABLE</a></li>
<li>
    <a href="sofa.php">SOFA</a></li>
<li>
    <a href="bookshelf.php">BOOKSHELF</a></li>
<ul>
<div id="preview">
<img src="" />
<div/>

<强> JQuery的

$(document).ready(function()
    {
       $("ul.pics li").hover(
           function()
           {//on hover over
              var data = $(this).metadata();//get the metadata 
               if(data.url) {//check if it exists
                   $("#preview img").attr("src",data.url)//set the url to it
               }

           },
           function()
           {//on hover OUT
               $("#preview img").attr("src","");//set the img src to nothing
           }
           );
    }
);

备注：

Ive heard this is W3C compliant并且可能与Html5兼容

为名为<li>的每个pic {url:'something'}添加一个类。

将网址设置为您喜欢的图片。

在JQuery中，悬停输出将img src设置为nothing-＆gt; ""。在这里你应该把它设置为无图片或做其他事情。

哦和download the metadata plugin（我使用了github的原始链接）

希望这会有所帮助。

Answer 3

它已经老了，但是我带着谷歌搜索到了这里。我相信最好的解决方案是：http://james.padolsey.com/demos/imgPreview/full/

当用户使用JQuery悬停在链接上时，如何显示图像

3 个答案: