Question

我想知道如何突出显示此页面上的活动缩略图http://www.doublezerofilms.com/doublezero-template-webSamples.html所以当它被点击时它会一直停留在鼠标悬停img上，直到点击另一个缩略图？

这是我用来选择视频的代码，下面是html谢谢！

$(document).ready(function () {
    $("#Thumb1").click(function () {
        $("#hidden").hide().html('<iframe src="http://player.vimeo.com/video/38366163?autoplay=1"  width="508" height="286" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>').fadeIn(4e3);
        $("#leftsidePlayer").text("This is some text on the consulting video!")
    });

<div class="thumbsWrap">
                        <div>
                            <div id="Thumb1" class="fadehover">
                            <img src="images/thumb1.jpg" alt="" class="a" />
                            <img src="images/thumb1-over.jpg" alt="" class="b" />
                            </div>

                            <div id="Thumb2" class="fadehover">
                            <img src="images/thumb2.jpg" alt="" class="a" />
                            <img src="images/thumb2-over.jpg" alt="" class="b" />
                            </div>

                            <div id="Thumb3" class="fadehover">
                            <img src="images/thumb3.jpg" alt="" class="a" />
                            <img src="images/thumb3-over.jpg" alt="" class="b" />
                            </div>

                            <div id="Thumb4" class="fadehover" style="margin:0px">
                            <img src="images/thumb4.jpg" alt="" class="a" />
                            <img src="images/thumb4-over.jpg" alt="" class="b" />
                            </div>
                        </div>
                    </div>

悬停代码

$(document).ready(function () {
    $("img.a").hover(function () {
        $(this).stop().animate({
            opacity: "0"
        }, "fast")
    }, function () {
        $(this).stop().animate({
            opacity: "1"
        }, "fast")
    })
});

Answer 1

你从来没有发布过涉及淡入淡出的代码，但这基本上就是你要做的。

//when a div is clicked add an active class to it
$('.thumbsWrap').on('click', '.fadehover', function() {
    $('.active').removeClass('active');
    $(this).addClass('active');
});

//in hover event check if parent has the 'active class'. If so then don't fade it out.
$("img.a").hover(function () {
    $(this).stop().animate({
        opacity: "0"
    }, "fast")
}, function () {
    if ( !$(this).parent().hasClass('active') ) {
       $(this).stop().animate({
           opacity: "1"
       }, "fast")
    }
})

Answer 2

正如我所见，您正在更改不透明度以突出显示缩略图（在您的悬停中）。所以这里有你想要的东西：http://jsfiddle.net/fnfJH/ 单击div时，它会将div的不透明度更改为1到0.5，并将更改后的新单击更改为1.

Answer 3

您需要创建一个CSS来隐藏您的图像，例如：

img.transparent {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

现在在按钮上添加点击事件

$("img.a").click(function () {
 $(this).addClass('transparent');
});

现在编辑鼠标不应该影响活动图像

$("img.a").hover(function () {
if(!($(this).hasClass('transparent'))) {
        $(this).stop().animate({
            opacity: "0"
        }, "fast");
}
    }, function () {
if(!($(this).hasClass('transparent'))) {
        $(this).stop().animate({
            opacity: "1"
        }, "fast")
}
    })

如何突出显示活动缩略图？

3 个答案: