首先非常感谢网友czqn8的无私分享，此作品是他在逛乐蜂网站时看效果比较实用就把它整理出来第一时间与大家分享了，主要功能是jquery配合动画插件animate实现图片翻牌旋转特效，当鼠标悬浮到图片上的时候就实现了图片与文字间的切换，大家好好利用哦。。。
实现全部功能的jquery代码如下：
$(function(){
var aLi = $('#brand .bd-box li');
var aImg = $('#brand .bd-box li img');
var aSpan = $('#brand .bd-box li span');
aLi.each(function(index){
$(this).mouseover(function(){
aSpan.eq(index).stop();
aImg.eq(index).stop();
aImg.eq(index).css({zIndex:1}).animate({
top:37,
height:0
},80,'',function(){
$(this).hide();
aSpan.eq(index).show().css({zIndex:2}).animate({
top:0,
height:75
},80)
})
})
$(this).mouseout(function(){
aSpan.eq(index).stop();
aImg.eq(index).stop();
aSpan.eq(index).css({zIndex:1}).animate({
top:37,
height:0
},80,'',function(){
$(this).hide();
aImg.eq(index).show().css({zIndex:2}).animate({
top:0,
height:75
},80)
})
})
})
})
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友czqn8 旋转特效 图片特效 滑动插件 图片播放 图片3D旋转 360度旋转 鼠标悬浮 悬停特效