JavaScript图片翻转
<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图片翻转的更多相关文章
- Javascript实现图片翻转
使用Js的对象属性能实现简单的翻转效果.通过onMouseover事件和onMouseOut事件就能实现鼠标移到链接上和移开链接发生反应.给两个图片加上链接实现都能翻转的效果. reverse.htm ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- 【应用】图片翻转js
图片翻转:图片随着鼠标指针划过进行替换 <img src="example.gif" onmouseover="this.src='exampleTwo.gif'& ...
- 原生js如何实现图片翻转旋转效果?
原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- CSS3图片翻转切换案例及其中重要属性解析
图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...
- 自己积累的一些Emgu CV代码(主要有图片格式转换,图片裁剪,图片翻转,图片旋转和图片平移等功能)
using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
随机推荐
- Oracle listener服务启动后又停止的解决方案
这是Oracle监听服务.忘了说我的版本是Oracle10g. 我装完Oracle数据库之后,然后用第三方工具plsql去连接,提示no listener,首先我反复检查tnsnames.ora配置文 ...
- php curl_setopt的相关设置查询手册
bool curl_setopt (int ch, string option, mixed value) curl_setopt()函数将为一个CURL会话设置选项.option参数是你想要的设置, ...
- Java对【JSON数据的解析】--官方解析法
要求:解析下面5个JSON数据 1.String string ="{name:'zhangsan',age:18}"; 2.String string2 = "{per ...
- Dede CMS如何在文章中增加“附件下载”操作说明
1.进入后台--在"附件管理"中选择"上传新文件" 2.在"说明标题"输入要上传文件的名字,并在下面浏览找到要上传的文件,保存. 3.在&q ...
- HTML/XML/XPATH基础
Html超文本标记语言 网页上单击右键→查看源文件/查看源代码 Html基本结构 <html> 为文档根元素,所有元素都在内部进行 <head> ...
- 转发:Ubuntu软件卸载安装的命令
说明:由于图形化界面方法(如Add/Remove... 和Synaptic Package Manageer)比较简单,所以这里主要总结在终端通过命令行方式进行的软件包安装.卸载和删除的方法. 一.U ...
- JS阻塞以及CSS阻塞
一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...
- javascript痛点之四this的指向问题
先看以下例子 1.我们直接调用this看看指向的是谁 alert(this);//指向window 2.在函数中直接调用看看指向的是谁 function fn(){ alert(this); } fn ...
- Linux版微信
一.到github上下载https://github.com/geeeeeeeeek/electronic-wechat/releases下载linux-x64.tar.gz,具体根据操作系统是32位 ...
- java中的vo、dto 、dao
VO是跟数据库里表的映射,一个表对应一个VO DAO是用VO来访问真实的表,对数据库的操作都在DAO中完成 BO是业务层,做逻辑处理的 VO , PO , BO , QO, DAO ,POJO ...