Question

我正在为我的Web Design 2课程做最后的项目，我想用jQuery打扮一下我的网站。您有没有注意到在iTunes或iOS上，当您通过专辑查看音乐时，它会显示图像滑块中的封面看起来非常好。我想做一些与此类似的东西减去封面所做的翻转。到目前为止，这是我的代码：

$(document).ready(function(){
$('.secondImage').animate({ width: '155px', height: '155px' }, 0);
$('.thirdImage').animate({ width: '155px', height: '155px' }, 0);
$('.fourthImage').animate({ width: '155px', height: '155px' }, 0);
$(".item").hide(0).delay(2000).fadeIn(800);   // hides the columns div to ensure images are loaded
$("#loading").hide(0).fadeIn(500).delay(1000).fadeOut(500);   // hides the loading icon

$("#firstColumn").hover(function(){     
    $('.secondImage').animate({ width: '155px', height: '155px' }, 0);
    $('.thirdImage').animate({ width: '155px', height: '155px' }, 0);
    $('.fourthImage').animate({ width: '155px', height: '155px' }, 0);
    $('.firstImage').stop().animate({ width: '315px', height: "315px" }, 500);
});

$("#secondColumn").hover(function(){ 
    $('.firstImage').animate({ width: '155px', height: '155px' }, 0);
    $('.thirdImage').animate({ width: '155px', height: '155px' }, 0);
    $('.fourthImage').animate({ width: '155px', height: '155px' }, 0);
    $('.secondImage').stop().animate({ width: '315px', height: "315px" }, 500);
});

$("#thirdColumn").hover(function(){   
    $('.firstImage').animate({ width: '155px', height: '155px' }, 0);
    $('.secondImage').animate({ width: '155px', height: '155px' }, 0);
    $('.fourthImage').animate({ width: '155px', height: '155px' }, 0);
    $('.thirdImage').stop().animate({ width: '315px', height: "315px" }, 500);
});

$("#fourthColumn").hover(function(){  // when second div is hovered, set opacity of others to 0.5
    $('.firstImage').animate({ width: '155px', height: '155px' }, 0);
    $('.secondImage').animate({ width: '155px', height: '155px' }, 0);
    $('.thirdImage').animate({ width: '155px', height: '155px' }, 0);
    $('.fourthImage').stop().animate({ width: '315px', height: "315px" }, 500);
});
});

当页面加载时，主内容区域将被隐藏，同时出现假加载屏幕。这样做只是因为我觉得它看起来很酷:)。图像重新调整大小并变得像我想要的那样大。问题是，如果你走得太快，那么所有的图像会同时重新调整大小。我认为.stop（）函数应该取消，但也许我做错了。是否有更简单的方法来执行.animate（）？我愿意接受任何建议。教程或示例链接也很受欢迎。

提前谢谢大家！ - 迈克

Answer 1

这是一个基本的例子，看看：

demo jsBin

var imgWmarg = 159; // image with margins (px)
var imgW = 155;
var increaseWidth = 80; // px (both sides)

$('.item img').each(function(i,e){

  $(this).css({position:'absolute', left: '+='+(imgWmarg*i) });

  $(this).hover(function(){    
        $(this).css({zIndex:1}).stop(1).animate({ top:-(increaseWidth/2), left:((imgWmarg*i)-(increaseWidth/2)), width:(imgW+increaseWidth) },300);    
  }, function(){    
        $(this).stop(1).animate({ top:0, left:(imgWmarg*i), width:imgW }, 100, function(){
                $(this).css({zIndex:0});     // at the end of animation
        });
  });

});

我做了什么：

由于图像设置为position：relative，我们必须使用jQuery将它们设置为绝对并通过知道带边距的宽度及其在父元素内的相应索引N来动态重置其“正常”位置
i中的.each(function(i,e){会将每个元素的索引返回给动画
将i（0,1,2,3）乘以imgWmarg我们有他们的位置。
比我们撤消 - 重做那个位置悬停。

jQuery itunes图像滑块

1 个答案:

demo jsBin