Jquery Nivo Slider转换如何工作？

Question

Jquery Nivo Slider转换如何工作？

use*_*510 5 html css jquery nivo-slider

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

如果任何人有关于如何制作过渡效果的一般想法或具体代码,那将不胜感激.

Answer 1

Tig*_*gra 6

一般的想法如下:你有第一个图像的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>

Run Code Online (Sandbox Code Playgroud)

而且你还可以拥有另一个image2 div,它将在你加载所有碎片后显示出来.在展示之后摧毁所有碎片

有很多方法可以在javascript上强制完成整个过程对于我来说首先制作数组(div数组)然后你可以创建你想要的任意数量的效果,只需用不同的效果和不同的顺序显示它们

我不知道nivo是否使用这种方式或其他方式,但这有效:)

归档时间：	14 年，7 月前
查看次数：	1221 次
最近记录：	13 年，3 月前