JQuery 缩略图悬停突出显示（隐藏其他缩略图）

发布于 2024-11-18 05:28:38 字数 383 浏览 2 评论 0原文

我正在尝试复制在 http://www.rockstargames.com/lanoire/ 中找到的效果在第三个框中。当悬停缩略图时，彼此都会变暗。为了实现这一点，在标准 javascript 中，我将按如下方式处理 onMouseOver 事件：

获取对每个缩略图的
引用迭代每个缩略图，但悬停的缩略图并更改不透明度值

我将通过设置超时来处理 onMouseOut 事件，之后每个缩略图拇指将被重置。

我的问题是我对JQuery了解甚少，我不知道我的方法是否正确。我宁愿不去编写代码而最终与框架争论。您有什么建议吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苏大泽ㄣ 2024-11-25 05:28:38

您的方法是正确的，但是我认为不需要超时（除非您当然想要超时）

您的逻辑可以转化为这样的内容：

$("img").hover(function () {
    /* Dim everything but this img: */
    $("img").not(this).stop().animate({ opacity: 0.5 });
}, function () {
    /* animate all images back to fully visible. */
    $("img").stop().animate({ opacity: 1.0 });
});

所有图像在页面加载和鼠标移出时都可见。不是悬停图像的图像会变暗。

这是一个工作示例： http://jsfiddle.net/SJ7bp/

Your approach is correct, however I don't see the need for a timeout (unless you wanted one of course)

Your logic translates into something like this:

$("img").hover(function () {
    /* Dim everything but this img: */
    $("img").not(this).stop().animate({ opacity: 0.5 });
}, function () {
    /* animate all images back to fully visible. */
    $("img").stop().animate({ opacity: 1.0 });
});

All images are visible upon page load and mouse out. Images that aren't the hovered images are dimmed out.

Here's a working example: http://jsfiddle.net/SJ7bp/

回复收藏 0 原文

骄兵必败 2024-11-25 05:28:38

您可以使用 jquery mouseenter 和 mouseleave 来实现相同的逻辑

step1: http://api .jquery.com/mouseenter/

step2: 使用jquery的this并获取每条记录所需的详细信息，这将获取当前对象的详细信息以及所有属性的详细信息。

然后使用 , jquery .css 属性来设置属性的

step3 http://api.jquery .com/css/

回复收藏 0 原文

锦欢 2024-11-25 05:28:38

为每个缩略图指定一个类（例如.thumbnail），然后使用 jQuery 设置不透明度，并应用mouseover 和mouseout 事件：

$(".thumbnail").css("opacity", "0.5").mouseover(function() {
     $(this).css("opacity", "1.0"); 
}).mouseout(function() {
     $(this).css("opacity", "0.5");  
});

您可以在示例小提琴中看到它的工作原理。

Give each thumbnail a class (for example .thumbnail), then use jQuery to set the opacity, and apply a mouseover and mouseout event to each:

$(".thumbnail").css("opacity", "0.5").mouseover(function() {
     $(this).css("opacity", "1.0"); 
}).mouseout(function() {
     $(this).css("opacity", "0.5");  
});

You can see this working in this example fiddle.

回复收藏 0 原文

~没有更多了~