我认为在幻灯片中的过渡效果中,只有两种淡入和淡出的动画方法可供使用,其他的必须由css实现,我是对的吗?如果没有,请举例,如果是,请指导我我怎样才能实现其中的一些,或者之前有人做过它?
答案 0 :(得分:2)
fadeIn()
和fadeOut()
是最容易使用的,但它们只是jquery动画功能的快捷方式。这些使用css,就像所有其他动画一样,包括自定义动画,你只需要直接处理它。
在jQuery中,您可以使用动画功能转换任何具有数值(高度,宽度,顶部,左侧等)的css值。对于更复杂的内置方法,您可以尝试jQuery UI库
一个例子:
$('#myDiv').animate({height:30,width:300,top:400,left:300});
有关详细信息,请参阅jQuery animate documentation。
我还建立了自己的jQuery slider which you can find here。进入源代码可能会为您提供更多信息,因为它会严重影响动画图像的位置和大小。
希望这有帮助。
答案 1 :(得分:1)
我两周前做过。我为fadeIn / fadeOut动画使用css3过渡。
演示:http://www-stage.moztw.org/index2.shtml
手写笔(stylus)
.slider
position: relative
.slider-section
position: absolute
left: 0
top: 0
height: 100%
width: 100%
opacity: 0
z-index: 0
transition: opacity 2s ease
&.show
opacity: 1
z-index: 1
.slider-section-title
color: #FFF
position: absolute
left: 10px
top: 10px
.slider-section-description
position: absolute
bottom: 0
left: 0
width: 100%
padding: 5px 10px
background: rgba(0, 0, 0, .7)
color: #FFF
.slider-btn-group
position: absolute
z-index: 2
width: 100%
height: 10px
bottom: 45px
left: 0
text-align: center
.slider-btn
display: inline-block
margin: 0 5px
a
display: inline-block
width: 25px
height: 10px
background: rgba(0, 0, 0, .5)
color: #FFF
text-indent: 100%
overflow: hidden
&.current a
background: rgba(0, 0, 0, .8)
HTML
<div class="slider key-point-slider">
<section class="slider-section show" data-background="http://www.mozillabolivia.org/wp-content/uploads/2012/06/promo-beta.jpg">
<h3 class="slider-section-title">Title 1</h3>
<div class="slider-section-description">
<p>asd a dsa sda dsasda sdasd asd asda as dasdas dasd</p>
</div>
</section>
<section class="slider-section" data-background="http://www.mozillabolivia.org/wp-content/uploads/2012/06/promo-affiliates.jpg">
<h3 class="slider-section-title">Title 2</h3>
<div class="slider-section-description">
<p>asd a dsa sda dsasda sdasd asd asda as dasdas dasd</p>
</div>
</section>
</div>
的JavaScript
// load images
$('.slider-section').each(function () {
var $this = $(this);
$this.css('background-image', 'url("' + $this.data('background') + '")');
});
// init all sliders
$('.slider').each(function () {
var $this = $(this);
var $sections = $this.find('.slider-section');
var len = $sections.length;
var timer;
var curr = 0;
var btnGroup = $('<div class="slider-btn-group"></div>');
// append crontral btns
(function () {
var i = len;
var tmp = '<ul class="slider-btn-group-ul">';
while (i) {
i -= 1;
tmp += '<li class="slider-btn"><a href="#">' + i + '</a></li>';
}
tmp += '</ul>';
btnGroup.append(tmp);
})();
var $btns = btnGroup.find('.slider-btn a').on('click', function () {
moveTo($(this).parent().index());
return false;
});
$this.append(btnGroup);
function moveTo(i) {
curr = i;
$sections
.eq(i)
.addClass('show')
.siblings('.show')
.removeClass('show');
$btns
.parent()
.eq(i)
.addClass('current')
.siblings('.current')
.removeClass('current');
}
moveTo(0);
var next = (function next(i) {
timer = setTimeout(function () {
moveTo(i);
next(i + 1 >= len ? 0 : i + 1);
}, 5000);
return next;
})(1);
$this.on('mouseenter', function () {
timer && clearTimeout(timer);
});
$this.on('mouseleave', function () {
next(curr);
});
});