Jquery Nivo Slider 过渡如何工作？答案

【问题标题】：How do Jquery Nivo Slider transitions work?Jquery Nivo Slider 过渡如何工作？
【发布时间】：2011-11-19 10:52:30
【问题描述】：

我想知道如何创建 Jquery Nivo Slider 过渡效果，而不是创建整个插件。我尝试使用 CSS 的 clip 属性，但我无法使用它来创建图像的一部分逐渐消失或逐块移出的效果，直到下一张幻灯片放映。

如果有人对如何制作过渡效果有一般想法或具体代码，将不胜感激。

【问题讨论】：

标签： jquery html css nivo-slider

【解决方案1】：

一般的想法如下：你有第一个图像的 div，然后你有大量的第二个图像的 div，你产生它们调整 css 属性

每个第二个图像 div 只是调整背景的一小部分，因此它会覆盖上一个图像，它的一部分

使用此方法，您可以按您想要的任何顺序生成碎片，并获得您想要的任何效果。将它们滑入，淡入淡出，随机填充，任何东西

HTML 将如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
    .first{
        height:500px;
        width:500px;
        position: absolute;
        background:url(1.jpg);
        z-index: 2;

    }

    .second_part1{
        height:50px;
        width:50px;
        position: absolute;
        background:url(2.jpg) 0 0;
        z-index: 2;

    }

    .second_part2{
        height:50px;
        width:50px;
        position: absolute;
        background:url(2.jpg) -50px 0;
        left:50px;
        z-index: 2
    }

    .second_part3{
        height:50px;
        width:50px;
        position: absolute;
        background:url(2.jpg) -200px -150px ;
        left:200px;;
        top:150px;
        z-index: 2
    }
</style>
</head>
<body>
    <div class="first">
    </div>
    <div class="second_part1">
    </div>
    <div class="second_part2">
    </div>
    <div class="second_part3">
    </div>
</body>
</html>

您还可以拥有另一个 image2 div，它会在您加载完所有片段后显示。并在你出现后销毁所有碎片

有很多方法可以在 javascript 上实现整个过程至于我，首先制作片段数组（div数组），然后您可以创建任意数量的效果，只需以不同的效果和不同的顺序显示它们

我不知道 nivo 是使用这种方式还是其他方式，但这可行:)

【讨论】：

【解决方案2】：

刚刚通过 Google 访问此页面，同时为我的 NivoSlider 问题寻找解决方案。

NivoSlider，基本上只是创建一些 div 元素作为图像替换，然后将图像 URL 用作背景图像，每个片段的背景位置不同，稍后将进行动画处理：

// Set the slices size
var slice_w = $slider.width() / config.slices,
    slice_h = $slider.height();

// Build the slices
for (var i = 0; i < config.slices; i++) {
    $('<div class="slice" />').css({
        'position':'absolute',
        'width':slice_w,
        'height':slice_h,
        'left':slice_w*i,
        'z-index':4,
        'background-color':'transparent',
        'background-repeat':'no-repeat',
        'background-position':'-' + slice_w*i + 'px 0'
    }).appendTo($slider);
}

// Change the background image when slideshow starts from here... etc etc...

这是我很久以前做过的一个例子：http://reader-download.googlecode.com/svn/trunk/simple-useful-jquery-slideshow_nivo-slider-like-effect.html

【讨论】：