1

我正在为我的网页设计 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()？我对任何和所有建议持开放态度。教程或示例链接也很受欢迎。

谢谢大家！- 迈克

4

1 回答 1

2

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

演示 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
        });
  });
  
});

我做了什么：

  • 由于图像设置为位置：相对，我们必须使用 jQuery 将它们设置为绝对位置，并通过知道带边距的宽度和它们在父元素内的相应索引 N 来动态重置它们的“正常”位置
  • iin.each(function(i,e){返回每个元素的索引以进行动画处理
  • 将i(0,1,2,3) 乘以 imgWmarg，我们就有了它们的位置。
  • 比我们撤消 - 重做悬停位置。
于 2012-05-05T01:37:55.093 回答