首页 > 代码库 > JavaScript图片翻转
JavaScript图片翻转
<script type="text/javascript"> /** * 注册函数f,当文档加载问成时执行这个函数f * 如果文件已经载入完成,尽快以异步方式执行它 */ function onl oad(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="http://www.mamicode.com/normal.png" data-rollover="rollover_image.png"> * 要注意的是,此模块依赖于 onl oad.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 = http://www.mamicode.com/rollover;"data-rollover",img.src); //注册事件处理函数来创建翻转效果 img.onmouseover = function(){ this.src = http://www.mamicode.com/this.getAttribute("data-rollover"); }; img.onmouseout = function(){ this.src = http://www.mamicode.com/this.getAttribute("data-rollout"); }; } }); </script>
JavaScript图片翻转
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。