測試的chrome版本: 48.0.2564.97
其他版本或瀏覽器, 可能會有呈現上的差異, 請適當的修改各處的CSS
目的：用一張圖靜態的圖搞定特效
1.滑鼠移入時三角形變亮
2.點擊時, 旋轉三角形與展開區域
下面是原料的原始碼
●CSS
<style
type="text/css">
/*補間動畫*/
@keyframes
arrow
{
0% { transform:rotate(0deg);} /*初始的呈現*/
100%
{ transform:rotate(90deg);
-webkit-filter:
brightness(200%);}
/*最終的呈現*/
}
@keyframes
arrow_close
{
0% { transform:rotate(90deg);}
100%
{ transform: rotate(0deg);
-webkit-filter:
brightness(100%);}
}
/*圖片套用的樣式*/
.test-arrow
{
animation-name:
arrow;
/*使用的補間動畫*/
animation-duration:
0.5s;
/*動畫時間長度*/
transform:rotate(90deg);
/*相對於原圖的旋轉角度*/
-webkit-filter:
brightness(200%);
/*相對於原圖的亮度*/
}
.test-arrow-close
{
animation-name:
arrow_close;
animation-duration:
0.5s;
transform:rotate(0deg);
-webkit-filter:
brightness(100%);
/**/
}
</style>
●混雜著asp.net的html(編譯到網頁時, 還是會回到html)
<table class="fastFunc"
style="width:
90%;">
<tr style="background-color:
#7292CC;
color:
#FFFFFF;">
<td>
<img id="i_arrow"
class="i_toggle"
src="../BlueTriangle_glow.png"
/>快速停用
</td>
</tr>
<tr>
<td>
<asp:Panel id="arrow"
CssClass="p_toggle"
runat="server"
BackColor="#C6DAF8">
//(自由發揮)
</asp:Panel>
</td>
</tr>
</table>
重這邊開始有區別, 這裡是jQuery與js主要運作的地方
第一種, 較直觀的方法(直接指定ID)
優：簡單不容易指錯, 在測試和規劃初期可以減少需排除的錯誤, 相當適合只用一次的功能
缺：想重複使用功能時, 會需要寫進所需的code, 讓檔案大幅成長
<script type="text/javascript">
$(document).ready(function () {
$("#arrow").hide();
$("#i_arrow").mouseover(function () { $(this).css("-webkit-filter", "brightness(200%)") })
$("#i_arrow").mouseout(function () { $(this).css("-webkit-filter", "brightness(100%)") })
$("#i_arrow").click(function () {
$(".fastFunc").slideToggle(300);
if (this.className == "test-arrow") {
this.className = "test-arrow-close";
}
else
this.className = "test-arrow";
});
});
</script>
第二種, 較抽象的方阿 (利用this與遍歷)
優：只需寫一次, 並透過適當的條件選擇, 就能套用在不同區塊
缺：不熟悉selector或架構尚未定型的開發中頁面, 使用此方法反而會增加困擾
<script type="text/javascript">
$(document).ready(function () {
$(".p_toggle").hide();
$(".fastFunc
.i_toggle").mouseover(function () { $(this).css("-webkit-filter", "brightness(150%)") })
$(".fastFunc
.i_toggle ").mouseout(function () { $(this).css("-webkit-filter", "brightness(100%)") })
$(".fastFunc
.i_toggle").click(function () {
$(this).parents("tr").next().find(".p_toggle").slideToggle(300);
if (this.className == "test-arrow")
this.className = "test-arrow-close";
else
this.className = "test-arrow";
})
});
</script>
可以注意看, 其實程式碼差不多, 而是差別在selector的寫法
