图片翻转：图片随着鼠标指针划过进行替换
<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>
时间： 2024-11-07 16:54:54