Tôi tự hỏi làm thế nào để tạo hiệu ứng chuyển tiếp Jquery Nivo Slider, không tạo ra toàn bộ plugin. Tôi đã thử chơi với thuộc tính clip của CSS nhưng tôi không thể tạo ra hiệu ứng khi một phần của hình ảnh mờ dần hoặc di chuyển từng khối cho đến khi trang chiếu tiếp theo hiển thị.Chuyển đổi Jquery Nivo Slider hoạt động như thế nào?
Nếu có ai có ý tưởng chung hoặc mã cụ thể về cách tạo hiệu ứng chuyển tiếp, nó sẽ được đánh giá cao cảm ơn.
Ý tưởng chung là như sau: Bạn đã div với hình ảnh đầu tiên và sau đó bạn có số lượng lớn của các div với hình ảnh thứ hai, bạn đẻ trứng họ điều chỉnh các thuộc tính css
Mỗi hình ảnh div thứ hai chỉ là một mảnh nhỏ của nó với nền được điều chỉnh, vì vậy nó chồng lên hình ảnh trước đó, một phần của hình ảnh đó
Với phương pháp này, bạn có thể tạo ra các mảnh theo bất kỳ thứ tự nào bạn muốn với bất kỳ tác dụng nào bạn muốn. Trượt chúng trong, mờ dần họ im, randomally điền, bất cứ điều gì
Html sẽ trông như thế này:
<!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>
Và bạn cũng có thể có một div image2, mà sẽ được hiển thị sau khi bạn đã tải tất cả các phần . Và phá hủy tất cả các mảnh sau khi bạn hiển thị nó lên
Có rất nhiều cách để ngăn chặn toàn bộ quá trình trên javascript Đối với tôi trước hết hãy tạo mảng các mảng (mảng div) và sau đó bạn có thể tạo bất kỳ số hiệu ứng nào muốn, chỉ cần bằng cách hiển thị cho họ với các hiệu ứng khác nhau và thứ tự khác nhau
tôi không biết nếu NIVO sử dụng theo cách này hoặc một số khác, nhưng hoạt động này :)
chỉ cần bỏ trang này qua Google khi tìm kiếm một giải pháp cho vấn đề NivoSlider của tôi.
NivoSlider, về cơ bản chỉ cần tạo một số phần tử div để thay thế hình ảnh, sau đó lấy URL hình ảnh được sử dụng như hình nền với vị trí nền khác nhau cho mỗi mảnh sẽ được hoạt hình sau:
// 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...
Dưới đây là một ví dụ Tôi đã làm từ lâu rồi: http://reader-download.googlecode.com/svn/trunk/simple-useful-jquery-slideshow_nivo-slider-like-effect.html