【应用】图片翻转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>
【应用】图片翻转js的更多相关文章
- 原生js如何实现图片翻转旋转效果?
原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...
- CSS3图片翻转切换案例及其中重要属性解析
图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...
- JavaScript图片翻转
<script type="text/javascript"> /** * 注册函数f,当文档加载问成时执行这个函数f * 如果文件已经载入完成,尽快以异步方式执行它 ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- Javascript实现图片翻转
使用Js的对象属性能实现简单的翻转效果.通过onMouseover事件和onMouseOut事件就能实现鼠标移到链接上和移开链接发生反应.给两个图片加上链接实现都能翻转的效果. reverse.htm ...
- 自己积累的一些Emgu CV代码(主要有图片格式转换,图片裁剪,图片翻转,图片旋转和图片平移等功能)
using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...
- gl.TexSubImage2D 使用遇到图片翻转的问题
这2天在用gl.TexSubImage2D把几张小图转拼接成大图,如果在渲染物体之前拼接好就没有问题,但在开始渲染物体后拼接就会有问题.后来我做了2件事情来找原因, 1. 用拼好的图来画一个正方形,大 ...
- div 中图片溢出问题及 CSS3中图片翻转问题
如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...
随机推荐
- Mac -- 安装及使用Docker
安装这三个软件. 有两个安装包: 和 安装完使用挺简的. 更多内容官网查看: https://docs.docker.com/
- gitignore 规则
在使用git的过程中,总有一些我们不想被跟踪的文件,例如vim的交换文件,编译产生的文件等等.这时,我们可以在项目的根目录下创建一个名为 .gitignore 的文件,列出不想被跟踪的文件模式即可.下 ...
- mysql insert into 时报1062错误
插入数据库时报1062错误,并没有错误详解 而网上的原因大多是主键重复,找了半天并没有解决办法 最后发现是表设置了联合唯一 ,插入的数据和之前的一样 >_< 太真实了
- 配置Office Outlook 2013
导航 背景——配置过程——错误(Error)——参考资料 背景 最近,折腾了一阵子邮箱客户端,包括:Foxmail.thuderbird.outlook:最后,考虑到outlook对文本的强大的支持能 ...
- Eoeclient源代码分析---SlidingMenu的使用
Eoeclient源代码分析及代码凝视 使用滑动菜单SlidingMenu,单击滑动菜单的不同选项,能够通过ViewPager和PagerIndicator显示相应的数据内容. 0 BaseSlid ...
- 【每日Scrum】第五天(4.26) TD学生助手Sprint2站立会议
站立会议 组员 昨天 今天 困难 签到 刘铸辉 (组长) 今天增加了几个页面的子菜单,然后设计了几个要用的界面 今天和楠哥做了课程事件和日历表操作的例子,并尝试做时间表和日历表的数据库设计 安卓的数据 ...
- B树的生成
B树的生成 flyfish 2015-7-19 从空树開始构建一棵B树 逐个插入keyword 规则: 除根结点之外的全部非终端结点至少有⌈m/2⌉棵子树,所以keyword的个数必须 n为keywo ...
- IOS 学习记录
表情排列 // // MJViewController.m // 01-表情排列 // // Created by apple on 13-11-24. // Copyright (c) 2013年 ...
- ActiveMQ 消息持久化到Mysql数据库
[root@txylucky local]# tar -zxvf apache-activemq-5.15.8-bin.tar.gz[root@txylucky local]# mv apache-a ...
- OpenCV 入门示例之一:显示图像
前言 本文展示一个显示图像的示例程序,它用于从硬盘加载一副图像并在屏幕上显示. 代码示例 // 此头文件包含图像IO函数的声明 #include "highgui.h" int m ...