プラグイン全体を作成せずにJquery Nivo Sliderトランジションエフェクトを作成する方法が不思議です。私はCSSのclipプロパティで再生しようとしましたが、次のスライドが表示されるまで、画像の一部がフェードしたり、ブロックごとに移動したりするエフェクトを作成できませんでした。Jquery Nivo Sliderトランジションはどのように機能しますか？
誰でも一般的なアイデアやトランジションエフェクトの作成方法に関する特定のコードがある場合は、感謝します。
一般的な考え方は以下の通りです： あなたが最初の画像とのdivを持っていると、あなたは第二の画像とのdivの大きな数を持っている、あなたは、それぞれの第二の画像のdivはそれのほんの一部であるCSSプロパティに
を調整し、それらを生みます背景が調整されているので、前の画像と一部が重なって表示されます。
この方法では、任意の効果が得られるように任意の順序で作品をスポーンすることができます。何でも、埋めるrandomally、イムそれらをフェード、それらをスライドさせ
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>
そして、あなたはまた、あなたがすべてのピースをロードした後に表示されます別の画像2 div要素を持つことができます。あなたがそれを表示した後にすべての部分を破壊してください
私は最初にすべての部分（配列の配列）を作成してから、いくつかのエフェクトを作成することができます、ちょうど異なる効果とは異なる順序
でそれらを表示することにより、nivoが、このようまたはいくつかの他のを使用している場合、私は知らないが、この作品たい:)
への解決策を見つけることながら、Googleだけを経由してこのページに下がりました私のNivoSliderの問題。
NivoSlider、基本的には、後のアニメ化され、各作品ごとに異なる背景の位置で背景画像として使用する画像のURLを取り、画像の代替として、いくつかのdiv要素を作成します。
// 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