图片翻转：图片随着鼠标指针划过进行替换

<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的更多相关文章

  1. 原生js如何实现图片翻转旋转效果？

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

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

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

  3. JavaScript图片翻转

    <script type="text/javascript"> /** * 注册函数f,当文档加载问成时执行这个函数f * 如果文件已经载入完成,尽快以异步方式执行它 ...

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

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

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

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

  6. Javascript实现图片翻转

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

  7. 自己积累的一些Emgu CV代码（主要有图片格式转换，图片裁剪，图片翻转，图片旋转和图片平移等功能）

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

  8. gl.TexSubImage2D 使用遇到图片翻转的问题

    这2天在用gl.TexSubImage2D把几张小图转拼接成大图,如果在渲染物体之前拼接好就没有问题,但在开始渲染物体后拼接就会有问题.后来我做了2件事情来找原因, 1. 用拼好的图来画一个正方形,大 ...

  9. div 中图片溢出问题及 CSS3中图片翻转问题

    如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...

随机推荐

  1. 类加载器在加载类 的时候就已经对类的static代码块和static变量进行了初始化

    类装载器ClassLoader 类装载器工作机制 类装载器就是寻找类的节码文件并构造出类在JVM内部表示对象的组件.在Java中,类装载器把一个类装入JVM中,要经过以下步骤: [1.]装载:查找和导 ...

  2. android 获取GPS定位

    AndroidManifest.xml <?xml version="1.0" encoding="utf-8"?> <manifest xm ...

  3. editplus重新载入文档

    editplus重新载入文档 :document->reload

  4. [Algorithms] Queue & Priority Queue

    In this lesson, you will learn how to create a queue in JavaScript. A queue is a first-in, first-out ...

  5. Foundation框架 - NSException类

    NSException类 WBStudentManager.h #import <Foundation/Foundation.h> NSString* const NameInvalidE ...

  6. python（14）- 简单练习：登录账户失败三次，账户自动锁定

    题目需求:   1.输入用户名密码   2.认证成功后显示欢迎信息   3.输错三次后锁定 #读取注册用户的信息,用户名,密码,输错次数,写入字典中 user={} with open("D ...

  7. vim 宏的使用

    1. 基本使用 q[a-z] 开始录制宏 q  停止录制 @[a-z] 使用宏 @@ 调用最近使用的宏 22@[a-z] 多次重放宏 2. 宏的执行方式 串行方式:5@[a-z] 宏内包含向下一个目标 ...

  8. CentOS7配置opencv for python && eclipse c/c++[更新]

    更改前的安装过程有些问题,主要是ffmpeg-devel的安装部分,这里重新说一下 两种安装方法: 第一种,直接: # yum install numpy opencv* 这种方法安装了之后,能够在p ...

  9. openh264 在 osx 上的 nasm 问题

    先在 pc 上编译,熟悉一下. 编译遇到一个问题: nasm -DUNIX64 -DPREFIX -f macho64 -I./codec/common/x86/ -o codec/common/x8 ...

  10. Oracle中如何进行进制转换（2进制,10进制,16进制）

    1.16进制转换为10进制 可以通过to_number函数实现 SQL> select to_number('19f','xxx') from dual; TO_NUMBER('19F','XX ...