Question

我目前正在为一个客户的网站工作，该网站处理要求图片/视频库的具体建筑。我做的是这个：

我按照项目（例如砌体，砖砌等）对所有图片进行分组。项目本身内部有各种图片和视频。这是一个快速摘录：

<div class="gl-project-wrap">
    <p class="projectTitle">Commercial - new entrance Montessori school with concrete walk and architectural white poured piers</p>

        <div class="gl-image-wrap">
        <img src="images/thumbs/24.png" class="gl-image" />
            <img src="images/thumbs/25.png" class="gl-image" />
        <img src="images/thumbs/26.png" class="gl-image" />

            <img src="images/videos/screenshots/12.png" class="gl-video" alt="Brickwork - Stone Veneer" />

    </div>
</div>

现在这就是我想要做的事情：

当鼠标悬停在图像上时，将图像转换为比例（1.2），将边框更改为白色，并将光标更改为指针。这很好用。这不是我的问题

我的问题是：

当用户点击图片时，我写了一个jQuery插件，它读取图像的src，从中提取数字（例如24,25,26），进入'fullsize'文件夹并抓取fullsize根据上述数字的图像并开始加载它。然后图像显示在“灯箱”类型的应用程序中，等等等等等...这对常规图像效果很好。这不是我的问题。我只是在写这些信息，所以我可以更好地解释我的问题如下：

除了附加功能外，我希望屏幕截图图像的工作方式与图片略有相同。我希望播放按钮显示在图像onmousehover（或onmouseenter，以较好者为准）的顶部，以向用户表示这是一个视频。

这是我为此写的快速jQuery代码：

var gl_video;

$(document).ready(function() {
        $(document).on("mouseenter", ".gl-video", function(){ 

        gl_video = $(this);

    var styles = { 
            top:$(this).position().top,
        left:$(this).position().left,
        width:$(this).outerWidth() + 'px',
        height:$(this).outerHeight() + 'px'
    };

    $('<span id="videoCover" class="videoCover"><p>&#x27A4</p></span>').appendTo($(this).parents('.gl-image-wrap'));
    $('.videoCover').css(styles);
    });

        $(document).on("mouseleave", ".gl-video", function() {

           $(this).css({transform:'scale(1.2)', borderColor:'#fff'});
       $('.videoCover').css({transform:'scale(1.2)'});
    });

    $(document).on("mouseleave", ".videoCover", function(){ 

           $(gl_video).css({transform:'scale(1)', borderColor:'#e09b07'});
       $(this).animate({transform:'scale(1)'},2000, function(){ $(this).remove(); });
    });

});

这种作品，但我对此并不满意。我不是一个专业的javascript / jQuery程序员，但即便如此我也能看到这段代码很可怕而又草率。

有几件我不喜欢的事情：

当用户将鼠标悬停在屏幕截图上时，范围videoCover会附加到相应的.gl-image-wrap，但会将其附加到图像顶部。这会导致onmouseenter事件切换到跨度，并且屏幕截图图像不再被视为悬停。这就是为什么我创建了一个名为gl-video的全局变量。这样，可以记录悬停在屏幕上的屏幕截图，并稍后在我的插件中使用。

我更喜欢这样做：

当鼠标悬停在屏幕截图上时，播放按钮会出现在图像上方，一切正常。我不想再使用gl-video变量了。我想要显示播放按钮，但如果用户点击它，它应该作为点击后面的屏幕截图。现在，由于切换悬停事件，它就像点击了播放按钮一样。

我知道这有点令人困惑所以我在这里总结一下： 1）我想让我的视频截图在悬停时显示一个播放按钮 2）我希望这个播放按钮基本上没有点击事件。如果用户点击它，它应该在播放按钮后面的图像上触发点击事件

我有几个想法，但没有一个让我满意： 1）将以下内容设置为播放按钮元素：

pointer-events: none

由于IE不支持，我宁愿不使用它。 2）为每个视频截图创建一组完整的新拇指，并用悬停src替换src，用于悬停时的每个视频截图。我宁愿不使用这个，因为我将在页面上有大约30-40个视频，并且需要加载双倍的图片（一次用于常规拇指，再次用于每个的悬停图片）。这会增加加载时间，我想远离那个。

嗯，就是这样。任何帮助，将不胜感激。在我走之前，我想提一下，这段代码并非一成不变，这意味着我愿意接受更好的建议。不要试图修复我的草率代码。如果您对如何实现这一点有更好的了解，我将非常乐意阅读它。

再次感谢你们！

这是我的JSFiddle

Answer 1

我对您的问题的想法是将 空白div 放在您的图片上并连接您现在与之关联的所有活动（点击/悬停/离开）图像。
在这个空div（较小的z-index）下显示你的“play”-gif，当用户悬停你的空div时。在底部留下你的形象。

这是我能想象的最简单的解决方案。

在你的小提琴例子中 - 我用css做包装 - 不需要animate。在这里：http://jsfiddle.net/abbJV/1/
...边框和图像之间不需要的间距已修复：http://jsfiddle.net/abbJV/2/
...最终版本 - 风格和漂亮：http://jsfiddle.net/abbJV/3/
享受！

Answer 2

尝试将event.preventDefault()用于播放按钮的无点击事件，然后使用click（）触发图像的点击事件。

如何使一个元素无形点击事件？

2 个答案: