如何修改jquery spy脚本使其水平移动?(现在它在垂直移动)。
我认为必须在代码的这一部分进行修改:
(function ($) {
$.fn.reverseOrder = function() {
return this.each(function() {
$(this).prependTo( $(this).parent() );
});
};
$.fn.simpleSpy = function (limit, interval) {
limit = limit || 4;
interval = interval || 4000;
return this.each(function () {
1.设置捕获所有有趣标题的缓存精简列表以限制li元素
var $list = $(this),
items = [], // uninitialised
currentItem = limit,
total = 0, // initialise later on
start = 0,//when the effect first starts
startdelay = 4000;
width = $list.find('> li:first').width();
// capture the cache
$list.find('> li').each(function () {
items.push('<li>' + $(this).html() + '</li>');
});
total = items.length;
$list.wrap('<div class="spyWrapper" />').parent().css({ width : width * limit });
$list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
// 2. effect
function spy() {
// insert a new item with opacity and width of zero
var $insert = $(items[currentItem]).css({
width : 0,
opacity : 0,
display : 'none'
}).prependTo($list);
// fade the LAST item out
$list.find('> li:last').animate({ opacity : 0}, 600, function () {
// increase the width of the NEW first item
$insert.animate({ width : width }, 600).animate({ opacity : 1 }, 1000);
// AND at the same time - decrease the width of the LAST item
// $(this).animate({ width : 0 }, 1000, function () {
// finally fade the first item in (and we can remove the last)
$(this).remove();
// });
});
currentItem++;
if (currentItem >= total) {
currentItem = 0;
}
setTimeout(spy, interval)
}
if (start < 1) {
setTimeout(spy,startdelay);
start++;
} else {
spy();
}
});
示例:http://dart-foto.ru/index_p.php
http://jqueryfordesigners.com/simple-jquery-spy-effect/
我会使用CSS来浮动列表项。。。那就行了。
li { float: left; }