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

<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. Typora +google + Markdown Here 公众号

    一劳永逸的公众号排版方法  http://mp.weixin.qq.com/s/zb-YaacNLggG2-njF5HJ0A 

  2. Android 中状态栏、标题栏、View的大小及区分

    1.获得状态栏的高度(状态栏相对Window的位置): Rect frame = new Rect(); getWindow().getDecorView().getWindowVisibleDisp ...

  3. python解析xml文件时使用ElementTree和cElementTree的不同点；iter

    在python中,解析xml文件时,会选用ElementTree或者cElementTree,那么两者有什么不同呢? 1.cElementTree速度上要比ElementTree快,比较cElemen ...

  4. iOS开发 CGBitmapContextCreate

    最近项目中,需要对图片进行各种操作. 使用CGBitmapContextCreate 创建位图上下文. CG_EXTERN CGContextRefCGBitmapContextCreate(void ...

  5. HDU 5054 Alice and Bob（数学）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5054 Problem Description Bob and Alice got separated ...

  6. [转载] C/C++中怎样获取日期和时间

    C/C++中怎样获取日期和时间摘要:  本文从介绍基础概念入手,探讨了在C/C++中对日期和时间操作所用到的数据结构和函数,并对计时.时间的获取.时间的计算和显示格式等方面进行了阐述.本文还通过大量的 ...

  7. （学习笔记3）BMP位图的读取与显示

    在(学习笔记2)中.我们已经具体说明怎样去创建MFC.在这节中.主要解决BMP位图照片的读取和显示问题. 我们新建一个projectdemo1.创建步骤请看(学习笔记2)中具体说明. 创建成功后,例如 ...

  8. loarocks install loadcaffe 失败

    loarocks install loadcaffe 失败 1.Error: Your user does not have write permissions in /home/zhangliang ...

  9. PHP读取远程文件的4种方法

    1. fopen, fread1 if($file = fopen("http://www.example.com/", "r")) {2 while(!feo ...

  10. 怎样在C语言里实现“面向对象编程”

    有人觉得面向对象是C++/Java这样的高级语言的专利,实际不是这样.面向对象作为一种设计方法.是不限制语言的.仅仅能说,用C++/Java这样的语法来实现面向对象会更easy.更自然一些. 在本节中 ...