JavaScript圖片翻轉

標籤：loaded   mouse   模組   建立   else   翻轉   normal   eve   attach   

<script type="text/javascript">/** * 註冊函數f，當文檔載入問成時執行這個函數f * 如果檔案已經載入完成，儘快以非同步方式執行它 */function onLoad(f){if(onLoad.loaded)window.setTimeout(f,0);else if(window.addEventListener)window.addEventListener("load",f,false);else if(window.attachEvent)window.attachEvent("onload",f);}//給onLoad設定一個標誌，用來指示文檔是否載入完成onLoad.loaded = false;//註冊一個函數，當文檔載入完成時設定這個標誌onLoad(function(){onLoad.loaded = true;});/** * 要建立圖片翻轉效果，將此模組引入到HTML檔案中 * 然後再任意<img>元素上使用data-rollover屬性來指定翻轉圖片的URL即可 * 如下所示： * <img src="normal.png" data-rollover="rollover_image.png"> * 要注意的是，此模組依賴於 onLoad.js */onLoad(function(){//所有處理邏輯都在一個匿名函數中，不定義任何符號for(var i=0 ; i < document.images.length ; i++){var img = document.images[i];var rollover = img.getAttribute("data-rollover");if(!rollover)continue;//確保將翻轉的圖片緩衝起來(new Image()).src = rollover;//定義一個屬性來標識預設的圖片和URLimg.setAttribute("data-rollover",img.src);//註冊事件處理函數來建立翻轉效果img.onmouseover = function(){this.src = this.getAttribute("data-rollover");};img.onmouseout = function(){this.src = this.getAttribute("data-rollout");};}});</script>

　　

JavaScript圖片翻轉