jquery - 使用悬停显示图像

我目前正在使用CakePHP和jquery。我已经得到了一系列期望的结果。我必须将该数组显示为输出。其中一个数组值包含一个“图像ID”，它对应于阵列中值的图像。我必须做的是仅当我将鼠标悬停在数组的数据上时才显示这些图像。现在所有的图像都在页面加载时加载。这增加了页面的加载时间。通过悬停方式，只有在鼠标悬停时才会调用图像，而不是在页面加载时调用图像。jquery - 使用悬停显示图像

我是jquery的新手。我只是想知道它是如何做到的。如果有人向我展示了一些启动方式，我可以将其解决。任何帮助，将不胜感激。如果您需要更多信息，请与我们联系。

问候， BG

来源

2011-12-07 BasicGem

添加一个悬停到页面不会减少加载时间获得该ID。当您将鼠标悬停在页面上时，您需要使用AJAX调用服务器。 –

你在说什么是惰性加载......有很多插件可以用来加载图像 - 但主要是当页面滚动时 - 你可以调整它们来使用悬停技术 – ManseUK

试着这么做：

HTML：

<div id="showImg">Show Images</div>

的Javascript和jQuery：

$('#showImg').mouseover(function(){ 
    $.post('pathToCakeServerPage', function(data) { 
     $('#showImg').append(data); 
    }); 
});

这里后的文档 - http://api.jquery.com/jQuery.post/ 的鼠标悬停 - http://api.jquery.com/mouseover/

来源

2011-12-07 12:14:50

它可以很容易地使用jQuery .hover（）来完成。

$(function() { 
    $("THE CSS SELECTOR YOU WANT TO HOVER").hover(
    function() { 
     $("THE CSS SELECTOR YOU WANT THE IMAGE IN").html('<img src="blabla.jpg" alt="" />'); 
    }) 

});

如果你想布拉布拉是一个ID，给你的CSS选择要HOVER ID和使用jquery

来源

2011-12-07 12:15:14

jquery - 使用悬停显示图像

回答

相关问题