覆盖按钮覆盖所有图像

Overlay button over all images

本文关键字:覆盖 图像 按钮      更新时间:2023-09-26

基本上我想循环通过html和得到所有的图片和覆盖一个小按钮在他们悬停,所以当用户点击那个按钮,一堆信息的图片将出现。现在我可以在照片上覆盖一个小图标,当它被点击时会产生一个弹出窗口,但我不知道如何动态地在悬停的所有照片上添加一个图标。这就是我目前所做的http://jsfiddle.net/s5sp1h6e/1/

//Getting all the images
function getAllImages() 
{
    var images = document.getElementsByTagName('img'); 
    var srcList = [];
    for(var i = 0; i < images.length; i++) 
    {
        srcList.push(images[i].src);
    }
}
I've found a script that overlays a image over all images but every time i'm changing the size of the image i'm overlaying, the script stops working and i can't understand why.

如果我想改变这一行的宽度和高度要硬编码,脚本停止工作。

var overlay = $('<img class="protectionOverlay" src="' + overlayImg + '" width="' +       img.width() + '" height="' + img.height() + '"/>') bla bla..

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>

$(function() 
{
    var overlayImg = 'http://www.privdog.com/PrivDog/logo-medium.png';
    var useOnAllImages = true;
    // Preload the pixel
    var preload = new Image();
    preload.src = overlayImg;
    $('img').on('mouseenter touchstart', function(e) 
    {
        // Only execute if this is not an overlay or skipped
        var img = $(this);
        if (img.hasClass('protectionOverlay')) return;
        if (!useOnAllImages && !img.hasClass('protectMe')) return; // The script will be applied to all images. IF u don't want this -> useOnAllImages = false and class="protectMe"
        // Get the real image's position, add an overlay
        var pos = img.offset(); 
        //var xx = overlayImg.offset();
        //alert(xx.top);
        var overlay = $('<img class="protectionOverlay" src="' + overlayImg + '" width="' + img.width() + '" height="' + img.height() + '"/>').css({position: 'absolute', zIndex: 9999999, left: pos.left, top: pos.top}).appendTo('body').bind('mouseleave', function() 
        {
            setTimeout(function(){ overlay.remove(); }, 0, $(this));
        });
        if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); });
    });
}   

基本上您需要为鼠标悬停和鼠标离开添加一个事件处理程序。在处理程序中对图像应用必要的更改。

$("img").on("mouseover", function () {
    $(this).addClass("overlay-class");
    var icon = $("<span class='icon' />").appendTo(document.body);
    // logic to position the icon
}).on("mouseout", function () {
    $(this).removeClass("overlay-class");
    $(".icon").remove();
});