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