JavaScript實現(xiàn)簡單圖片翻轉(zhuǎn)的方法

更新時間：2015年04月17日 09:44:03 作者：dingding

這篇文章主要介紹了JavaScript實現(xiàn)簡單圖片翻轉(zhuǎn)的方法,涉及javascript操作圖片與數(shù)組的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)簡單圖片翻轉(zhuǎn)的方法。分享給大家供大家參考。具體如下：

這里先取兩個命名smirk1.jpg和smirk2.jpg同樣大小的圖像
然后運行下面的代碼，可以實現(xiàn)簡單的圖片翻轉(zhuǎn)

<script type="text/javascript">
var revert = new Array();
var inames = new Array('smirk');
// Preload
if (document.images) {
 var flipped = new Array();
 for(i=0; i< inames.length; i++) {
  flipped[i] = new Image();
  flipped[i].src = ""+inames[i]+"2.JPG";
 }
}
function over(num) {
 if(document.images) {
  revert[num] = document.images[inames[num]].src;
  document.images[inames[num]].src = flipped[num].src;
 }
}
function out(num) {
 if(docu <script type="text/javascript">
var revert = new Array();
var inames = new Array('smirk');
// Preload
if (document.images) {
 var flipped = new Array();
 for(i=0; i< inames.length; i++) {
  flipped[i] = new Image();
  flipped[i].src = ""+inames[i]+"2.JPG";
 }
}
function over(num) {
 if(document.images) {
  revert[num] = document.images[inames[num]].src;
  document.images[inames[num]].src = flipped[num].src;
 }
}
function out(num) {
 if(document.images) document.images[inames[num]].src = revert[num];
}
</script>

希望本文所述對大家的javascript程序設計有所幫助。

您可能感興趣的文章:

JSX在render函數(shù)中的應用詳解
這篇文章主要介紹了JSX在render函數(shù)中的應用詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-09-09
使用controller接收js傳過來的參數(shù)問題
這篇文章主要介紹了使用controller接收js傳過來的參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
微信公眾號-獲取用戶信息（網(wǎng)頁授權(quán)獲?。崿F(xiàn)步驟
這篇文章主要介紹了微信公眾號-獲取用戶信息（網(wǎng)頁授權(quán)獲?。崿F(xiàn)步驟的相關資料,需要的朋友可以參考下
2016-10-10
Webpack之plugin的使用
本文主要介紹了Webpack之plugin的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2023-02-02
使用Fetch API時獲取404錯誤的解決方案
在現(xiàn)代Web開發(fā)中,Fetch API 是用于執(zhí)行網(wǎng)絡請求的主要工具之一,它提供了一種基于Promise的簡潔語法,使得異步操作更加直觀和易于管理,本文將詳細探討在使用Fetch API時獲取404錯誤的原因、如何檢測和處理這些錯誤,以及最佳實踐,需要的朋友可以參考下
2024-12-12
JS實現(xiàn)視頻彈幕效果
這篇文章主要為大家詳細介紹了JS實現(xiàn)視頻彈幕效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
JavaScript制作年歷的示例代碼
本文主要介紹了JavaScript制作年歷的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2012-05-05
JS判斷字符串變量是否含有某個字串的實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S判斷字符串變量是否含有某個字串的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
javascript 動態(tài)修改css樣式方法匯總(四種方法)
為了達到某種特殊的效果我們需要用Javascript動態(tài)的去更改某一個標簽的Css屬性，如何動態(tài)修改css樣式呢？面對這個問題，小編帶領大家來解決javascript動態(tài)修改css樣式，小伙伴們都快來學習吧
2015-08-08
js實現(xiàn)的xml對象轉(zhuǎn)json功能示例
這篇文章主要介紹了js實現(xiàn)的xml對象轉(zhuǎn)json功能,結(jié)合實例形式分析了javascript轉(zhuǎn)換成xml所涉及的字符串、對象、數(shù)組、遍歷等操作技巧與使用方法,需要的朋友可以參考下
2016-12-12