我想知道如何创建 Jquery Nivo Slider 过渡效果,而不是创建整个插件。我尝试使用 CSS 的clip
属性,但我无法使用它来创建图像的一部分逐渐消失或逐块移出的效果,直到下一张幻灯片放映。
如果有人对如何制作过渡效果有一般的想法或具体的代码,将不胜感激。
我想知道如何创建 Jquery Nivo Slider 过渡效果,而不是创建整个插件。我尝试使用 CSS 的clip
属性,但我无法使用它来创建图像的一部分逐渐消失或逐块移出的效果,直到下一张幻灯片放映。
如果有人对如何制作过渡效果有一般的想法或具体的代码,将不胜感激。
一般的想法如下:你有第一个图像的 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 是使用这种方式还是其他方式,但这有效:)
刚刚通过 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