【应用】图片翻转js
图片翻转：图片随着鼠标指针划过进行替换
<img src="example.gif" onmouseover="this.src='exampleTwo.gif'" onmouseout="this.src='example.gif'" />
像图片翻转这样的效果需要较高的响应度，这也意味着需要想办法来确保一些必要的图片预提取，让浏览器缓存起来。
客户端JavaScript定义了一个专用API来达到这一目的：
为了强制让图片缓存起来，首先利用Image()构造函数来创建一个屏幕外图像对象，之后，对该对象的src属性设置成期望的URL。
由于图片元素并没有添加到文档中，因此，它是不可见的，但浏览器还是会加载图片并将其缓存起来。
这样一来，之后当设置成同样的URL来显示该屏幕内的图片时，它会很快从浏览器换从中加载，而不需要通过网络加载。
<!DOCTYPE html> <html> <head> <title></title> <style> img{ position: absolute;top: 0;bottom: 0;left: 0;right: 0; margin: auto; } </style> </head> <body> <img src='{$Think.const.IMG_SRC}1.jpg' data-rollover="{$Think.const.IMG_SRC}2.jpg" width="300px" height="300px"> <script> /*当文档载入完成时调用一个函数*/ //注册函数f，当文档载入完成时执行这个函数f //如果文档已经载入完成，尽快以异步方式执行它。 function onLoad(f){ if(onLoad.loaded) //如果文档已经载入完成 window.setTimeout(f,0); //将f放入一部队列，并尽快执行它 else if(window.addEventListener) //注册事件的标准方法 window.addEventListener("load",f,false); else if(window.attachEvent) //ie8以及更早的ie版本浏览器注册事件的方法 window.attachEvent("onload",f); } //给onload设置一个标志，用来指示文档时候加载完成 onLoad.loaded=false; //注册一个函数，当文档载入完成时设置这个标志 onLoad(function(){ onLoad.loaded=true; }); /*优雅的图片翻转实现方式 * * 在img元素上使用data-rollover 属性来指定翻转图片的url即可 * * */ onLoad(function(){ //所有处理程序都在一个匿名函数中，不定义任何符号 //遍历所有的图片，查找data-rollover 属性 for(var i=0;i<document.images.length;i++){ var img=document.images[i]; var rollover=img.getAttribute('data-rollover'); if(!rollover) continue; //跳过没有data-rollover 属性的图片 //确保将翻转的图片缓存 (new Image()).src=rollover; //定义一个属性来标志默认的图片URL img.setAttribute("data-rollout",img.src); //注册时间处理函数来创建翻转效果 img.onmouseover=function(){ this.src=this.getAttribute("data-rollover"); }; img.onmouseout=function(){ this.src=this.getAttribute("data-rollout"); } } }); </script> </body> </html>
