Question

我正在投资组合网站上工作，它有一个固定到CMS的图库。这里的设置是将所有图像一个放在另一个上面，然后缩略图实际上是图像的蒙版部分，当你将鼠标悬停在一个图像上时，显示的图像代替所有其他“蒙面图像” ~~- 使用JQuery淡出淡出效果。画廊就像一系列预览框（面具），大约70x70px，相当小，这是一个如何工作的例子：~~

~~http://imgur.com/t3lJa~~

那就是说，我在掩盖这些图像方面遇到了麻烦，因为它将由CMS运行，因此掩模的实际位置不会相同，所以它'当上传更新的图像时，它就像一个移动的面具。我已经尝试在CSS中使用clip属性，但是需要将掩码放在一个位置，因此不是一个选项。我被困的任何想法：/

好的，所以我一直在努力，并找到了一种使用jQuery和CSS混合的方法。这是我的进步：

http://haiderali.heliumhost.tk/site/

但我仍然遇到一个问题，我似乎无法让鼠标悬停工作。现在你看到的是画廊在悬停时的样子我已经为测试设置了两个图像，我还设置了程序来将所有图像src属性收集到一个数组中。关于如何使这个工作的任何想法？这是代码：

// Assign each link it's class by position on screen
    var i = 0;

    for (i = 0; i <= 71; i++) {
        clipNum = i + 0;
        $('#links').find('a').eq(i).addClass('clip' + clipNum);
    }

// Define all img>src attributes to an array
    var SRC = new Array(71);

    for (i = 0; i <= 71; i++) {
        clipNum = i + 0;
        SRC[i] = $('a.clip' + clipNum + ' > img').attr('src');
    }

我通过存储图像src值然后用其替换所有其他源来成功尝试鼠标悬停，但我只能像这样硬编码：

var imgSrc1 = $('a.clip1 > img').attr('src');
$('a.clip1').mouseenter( function() {
    $('a.clip1 > img').attr({src: imgSrc1});

我现在的问题是我不能让它在循环计数器中工作:(我真的很喜欢一些帮助，如何使它适用于屏幕上的每个盒子我只能通过硬编码每个单独的盒子是72盒子2倍72张图片......那很多!!

Answer 1

我设法弄清楚问题，一直在我的鼻子底下。这是一个简单的.each（）语句，它循环代码以将适当的图像源发布到悬停上的所有框，然后通过一组图像源将它们恢复为正常。

我在这里发布代码，以便其他可能感兴趣的人可以看一下。

HTML（使用CSS排列成网格，剪辑图像设置为.clip1-onwards）：

<div id="links">
   <a href="#nogo" class="">
   <img src="images/one.jpg" />
   </a>...
   <a href="#nogo" class="">
   <img src="images/one.jpg" />
   </a>
</div>

jQuery的：

$(document).ready(function() {
// Assign each link it's class by position on screen
var i = 0;

for (i = 0; i <= 71; i++) {
    clipNum = i + 0;
    // Add incremented clip class to each link
    $('#links').find('a').eq(i).addClass('clip' + clipNum);
}

// Define all img>src attributes to an array
var SRC = new Array(71);

for (i = 0; i <= 71; i++) {
    clipNum = i + 0;
    SRC[i] = $('a.clip' + clipNum + ' > img').attr('src');
}

// Set initial opacity of boxes 
$('#links a > img').fadeTo('fast', '0.8');

// Hover Magic!!
$('#links a > img').hover(
    function() {
        // store img>src under current link
        var imgSrc = $(this).attr('src');
        // replace all img>src
        $('#links a > img').attr({ src: imgSrc});
        $('#links a > img').fadeTo('slow', '1.0');
    },
    function() {
        $.each( SRC , function(index, value) {
            // replace img>src from array
            $('#links a.clip' + index + ' > img').attr({ src: value});
        });
        // .stop() to make sure fadeIn() stops before fadeout()
        $('#links a > img').stop(true,true).fadeTo('fast', '0.8');
    }
);
});

在CSS / JQuery中制作蒙面库

1 个答案: