<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; //定义一个属性来标识默认的图片和URL
img.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图片翻转的更多相关文章

  1. Javascript实现图片翻转

    使用Js的对象属性能实现简单的翻转效果.通过onMouseover事件和onMouseOut事件就能实现鼠标移到链接上和移开链接发生反应.给两个图片加上链接实现都能翻转的效果. reverse.htm ...

  2. CSS图片翻转动画技术详解

    因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...

  3. CSS3图片翻转动画技术详解

    CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...

  4. 【应用】图片翻转js

    图片翻转:图片随着鼠标指针划过进行替换 <img src="example.gif" onmouseover="this.src='exampleTwo.gif'& ...

  5. 原生js如何实现图片翻转旋转效果?

    原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...

  6. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  7. CSS3图片翻转切换案例及其中重要属性解析

    图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...

  8. 自己积累的一些Emgu CV代码(主要有图片格式转换,图片裁剪,图片翻转,图片旋转和图片平移等功能)

    using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...

  9. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

随机推荐

  1. Oracle listener服务启动后又停止的解决方案

    这是Oracle监听服务.忘了说我的版本是Oracle10g. 我装完Oracle数据库之后,然后用第三方工具plsql去连接,提示no listener,首先我反复检查tnsnames.ora配置文 ...

  2. php curl_setopt的相关设置查询手册

    bool curl_setopt (int ch, string option, mixed value) curl_setopt()函数将为一个CURL会话设置选项.option参数是你想要的设置, ...

  3. Java对【JSON数据的解析】--官方解析法

    要求:解析下面5个JSON数据 1.String string ="{name:'zhangsan',age:18}"; 2.String string2 = "{per ...

  4. Dede CMS如何在文章中增加“附件下载”操作说明

    1.进入后台--在"附件管理"中选择"上传新文件" 2.在"说明标题"输入要上传文件的名字,并在下面浏览找到要上传的文件,保存. 3.在&q ...

  5. HTML/XML/XPATH基础

    Html超文本标记语言 网页上单击右键→查看源文件/查看源代码 Html基本结构 <html>               为文档根元素,所有元素都在内部进行 <head>   ...

  6. 转发:Ubuntu软件卸载安装的命令

    说明:由于图形化界面方法(如Add/Remove... 和Synaptic Package Manageer)比较简单,所以这里主要总结在终端通过命令行方式进行的软件包安装.卸载和删除的方法. 一.U ...

  7. JS阻塞以及CSS阻塞

    一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...

  8. javascript痛点之四this的指向问题

    先看以下例子 1.我们直接调用this看看指向的是谁 alert(this);//指向window 2.在函数中直接调用看看指向的是谁 function fn(){ alert(this); } fn ...

  9. Linux版微信

    一.到github上下载https://github.com/geeeeeeeeek/electronic-wechat/releases下载linux-x64.tar.gz,具体根据操作系统是32位 ...

  10. java中的vo、dto 、dao

    VO是跟数据库里表的映射,一个表对应一个VO  DAO是用VO来访问真实的表,对数据库的操作都在DAO中完成  BO是业务层,做逻辑处理的 VO , PO , BO , QO, DAO ,POJO  ...