js實現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法
更新時間：2015年02月17日 15:28:05 作者：代碼家園
這篇文章主要介紹了js實現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法,涉及HTML5中canvas方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了js實現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
復制代碼 代碼如下:
<html>
<title>js實現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效</title>
<body>
<script language="javascript">
var isIE = (document.uniqueID)?1:0;
var i=1;
function rotate(image)
{
var object = image.parentNode;
if(isIE){
image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";
i++;
if(i>4) {i=1};
}
else{
try{
var canvas = document.createElement('canvas');
if(canvas.getContext("2d")) {
object.replaceChild(canvas,image);
var context = canvas.getContext("2d");
context.translate(176, 0);
context.rotate(Math.PI*0.5);
context.drawImage(image,0,0);
}
}catch(e){}
}
}
</script>
<input type="button" value="點擊旋轉(zhuǎn)圖片" onclick="rotate(document.getElementById('myimg'))" /><br />
<img id="myimg" src="/images/m03.jpg"/>
</body>
</html>
<title>js實現(xiàn)按鈕控制圖片360度翻轉(zhuǎn)特效</title>
<body>
<script language="javascript">
var isIE = (document.uniqueID)?1:0;
var i=1;
function rotate(image)
{
var object = image.parentNode;
if(isIE){
image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";
i++;
if(i>4) {i=1};
}
else{
try{
var canvas = document.createElement('canvas');
if(canvas.getContext("2d")) {
object.replaceChild(canvas,image);
var context = canvas.getContext("2d");
context.translate(176, 0);
context.rotate(Math.PI*0.5);
context.drawImage(image,0,0);
}
}catch(e){}
}
}
</script>
<input type="button" value="點擊旋轉(zhuǎn)圖片" onclick="rotate(document.getElementById('myimg'))" /><br />
<img id="myimg" src="/images/m03.jpg"/>
</body>
</html>
希望本文所述對大家的javascript程序設計有所幫助。
相關文章
這幾個demo上星期平安夜做的，感覺效果不錯，就放在出來，分享給大家2012-01-01
js從輸入框讀取內(nèi)容,比較兩個數(shù)字的大小方法
下面小編就為大家?guī)硪黄猨s從輸入框讀取內(nèi)容,比較兩個數(shù)字的大小方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
最近做一個項目，需要javascript動態(tài)插入樣式，結(jié)果以前的方法失效了！查了2個小時的原因竟然是自己手賤，這個最后再說2012-02-02
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)底部彈出模態(tài)框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了jquery實現(xiàn)簡單的遮罩層相關代碼，內(nèi)容很豐富，教大家實現(xiàn)遮罩層效果，感興趣的小伙伴們可以參考一下2016-01-01
分享十三個最佳JavaScript數(shù)據(jù)網(wǎng)格庫
數(shù)據(jù)網(wǎng)格可以幫助解決在 HTML 表格上對帶有過濾、分頁、排序、搜索以及內(nèi)聯(lián)編輯這些功能特性的大量數(shù)據(jù)集的處理問題,需要的朋友可以參考下2017-04-04
用 js操作html標簽的一些代碼，大家可以運行后查看效果2008-11-11
JS響應鼠標點擊實現(xiàn)兩個滑塊區(qū)間拖動效果
這篇文章主要介紹了JS實現(xiàn)的兩個滑塊區(qū)間拖動效果代碼,涉及JavaScript響應鼠標事件針對頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2015-10-10
FireBug 調(diào)試JS入門教程 如何調(diào)試JS
這篇文章主要為大家介紹下通過firefox的FireBug調(diào)試JS，需要的朋友可以參考下2013-12-12
JavaScript設計模式--簡單工廠模式定義與應用案例詳解
這篇文章主要介紹了JavaScript設計模式--簡單工廠模式定義與應用,結(jié)合具體案例形式詳細分析了JavaScript設計模式中簡單工廠模式基本概念、定義、用法與相關注意事項,需要的朋友可以參考下2020-05-05