JavaScript垂直和水平翻轉(zhuǎn)圖片,翻轉(zhuǎn)過程中你可以和原圖進行比較,本實例僅水平和垂直翻轉(zhuǎn),暫不能指定旋轉(zhuǎn)角度,僅供參考。
<body>
<table width="433" border="2" align="center" cellpadding="3" cellspacing="4" bordercolor="#006699" bgcolor="#FFFFFF">
<tr>
<td colspan="2"><div align="center"><font color="#FF0000" size="6">水平翻轉(zhuǎn)</font></div></td>
</tr>
<tr>
<td width="165"><font color="#FF9900" face="黑體" size="4">原圖:</font></td>
<td width="252"><font color="#FF9900" face="黑體" size="4">水平翻轉(zhuǎn)執(zhí)行結(jié)果:</font></td>
</tr>
<tr>
<td><img src="/images/logo.gif" border="0" id="image1"></td>
<td><img src="/images/logo.gif" border="0" id="image11"></td>
</tr>
<tr>
<td colspan="2"><div align="center"><font color="#FF0000" size="6">垂直翻轉(zhuǎn)</font></div></td>
</tr>
<tr>
<td><font color="#FF9900" face="黑體" size="4">原圖:</font></td>
<td><font color="#FF9900" face="黑體" size="4">垂直翻轉(zhuǎn)執(zhí)行結(jié)果:</font></td>
</tr>
<tr>
<td><img src="/images/logo.gif" border="0" id="image2"></td>
<td><img src="/images/logo.gif" border="0" id="image22"></td>
</tr>
</table>
<p>
<center>
<input type="button" name="button1" value="水平翻轉(zhuǎn)" onClick="Hturn()">
<input type="button" name="button2" value="垂直翻轉(zhuǎn)" onClick="Vturn()">
</center>
</p>
<script language="javascript">
function Hturn()//水平翻轉(zhuǎn)
{
image11.style.filter = image11.style.filter =="fliph"?"":"fliph";
}
function Vturn()//垂直翻轉(zhuǎn)
{
image22.style.filter = image22.style.filter =="flipV"?"":"flipV";
}
</script>
</body>
</html>
本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請
點擊舉報。