本文主要內容
1. 效果展示
2. 實現的原理分析
3. 案例實現
1. 效果展示
如上效果，當用戶將鼠標移入到每一張圖片上，當前的圖片會有一個翻轉消失的效果，同時有一個圖片描述信息的面板會翻轉出現。而當鼠標移出圖片時，原有的圖片會翻轉出現，面板信息會翻轉消失。針對這樣一個簡單的效果描述，大家有沒有自己的實現方法？
2. 實現的原理分析
2.1 結構與樣式分析
由于需要的功能是隨著鼠標移入圖片與信息都需要翻轉，所以在同一個位置要存在兩個標簽并發生相應的變化，可以考慮使用定位來實現。
在本文中，采用的是圖片img與信息em都參照外層a標簽的定位方式，然后再進行相應的樣式變化。
2.2 基本功能邏輯
首先使用JS實現動態添加翻轉后展示的信息面板；
然后借助jQuery的hover方法，實現鼠標移入移出的功能；
最后針對不同的翻轉變化，讓圖片與信息面板發生相反的效果展示。
3. 案例實現
3.1 添加面板信息
在鼠標移入相應的圖片時，需要讓圖片可以翻轉消失，同時有一個信息面板可以翻轉出現。
但是在結構的書寫中并沒有提供面板信息的標簽，所以就需要使用JS動態的添加了一個em標簽，借助append方法把相應的標簽添加到了對應的img標簽的后面。如下圖所示：
除了添加標簽以外，還把當前圖片的alt屬性中替代性文本填充成了標簽的內容，其范例代碼：
//?對每個a標簽內部動態添加一個em標簽，并使其內容為img的alt屬性內容
label.find('.brand?a').each(function()?{
$(this).append(''?+?$(this).find('img').attr('alt')?+?'');
});
3.2 實現圖片的翻轉
實現圖片的翻轉是借助了jQuery中的hover方法，此方法攜帶了兩個函數，寫法如下：
label.find('.brand?a').hover(function()?{},?function()?{});
其中第一個函數表示的是鼠標移入發生的事情；第二個函數表示的是鼠標移出發生的事情。
圖片的翻轉主要就是在第一個函數中進行書寫，通過對外層的a標簽綁定hover事件，然后變化其內部img的高度值與定位值，同時使用動畫方式show()使得img后面的em標簽出現。
代碼范例如下：
//?鼠標移入img標簽動畫變小
$(this).find('img').stop().animate({
'height':?0,
'top':?'35px'
},?200,?function()?{
//?em標簽出現
$(this).hide().next().show();
//?em標簽動畫變大
$(this).next().animate({
'height':?'70px',
'top':?0
},?200);
});
3.3 實現信息面板的翻轉
實現信息面板的翻轉出現主要是hover事件中第二個函數的功能，該函數主要處理的是讓鼠標在移出時，em標簽變小，原來的img標簽要恢復到原本的初始狀態。
相應代碼如下：
//?鼠標移出em標簽動畫變小
$(this).find('em').animate({
'height':?0,
'top':?'35px'
},?200,?function()?{
//?img標簽出現
$(this).hide().prev().show();
//?img動畫變大
$(this).prev().animate({
'height':?'70px',
'top':?'0'
},?200);
});
3.4 成品代碼
jquery?hover鼠標懸停圖片旋轉動畫展示
.allbrand?.brand?{
overflow:?hidden;
width:?390px;
height:?225px;
margin:?40px?auto?0;
}
.allbrand?.brand?a?{
position:?relative;
float:?left;
width:?120px;
height:?70px;
margin:?0?6px?5px?0;
color:?#fff;
font-size:?14px;
line-height:?70px;
text-align:?center;
}
.allbrand?.brand?a?img?{
position:?absolute;
left:?10px;
width:?118px;
height:?68px;
border:?1px?solid?#e9e8e8;
}
.allbrand?.brand?a?em?{
overflow:?hidden;
display:?none;
position:?absolute;
top:?36px;
left:?10px;
width:?118px;
height:?0;
border:?1px?solid?#e9e8e8;
background:?#999;
opacity:?0.5;
cursor:?pointer;
}
//翻轉
function?brandAnimate(label)?{
if(label.find('.brand?em').length?!=?0)?{
return?false;
}
//?對每個a標簽內部動態添加一個em標簽，并使其內容為img的alt屬性內容
label.find('.brand?a').each(function()?{
$(this).append(''?+?$(this).find('img').attr('alt')?+?'');
});
label.find('.brand?a').hover(function()?{
//?鼠標移入img標簽動畫變小
$(this).find('img').stop().animate({
'height':?0,
'top':?'35px'
},?200,?function()?{
//?em標簽出現
$(this).hide().next().show();
//?em標簽動畫變大
$(this).next().animate({
'height':?'70px',
'top':?0
},?200);
});
},?function()?{
//?鼠標移出em標簽動畫變小
$(this).find('em').animate({
'height':?0,
'top':?'35px'
},?200,?function()?{
//?img標簽出現
$(this).hide().prev().show();
//?img動畫變大
$(this).prev().animate({
'height':?'70px',
'top':?'0'
},?200);
});
});
}
brandAnimate($('.allbrand'));
原文地址：http://www.h5course.com
