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

<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. U盘格式化时分配单元的大小的设置

    格式化时主要有如下格式,且对应的操作系统的不一样: FAT32:Windows和Mac都支持,不过单个文件不能超过4G,但可以采用分包压缩的方式搞定. NTFS:Windows专用格式,Mac常规无法 ...

  2. dtrace 语法

    Usage: dtrace [-aACeFHlqSvVwZ] [-arch i386|x86_64] [-b bufsz] [-c cmd] [-D name[=def]]      [-I path ...

  3. 【前台 ajax】前台ajax请求，地址正确，但是报错不进入后台

    前台ajax请求,地址正确,但是报错不进入后台 出现上述问题,可能的情况是 1.ajax用的post,而后台限定用get,或者所有的post请求都被拦截,所以不能正常进入并且报错403 @Reques ...

  4. Go -- FIFO类(缓存淘汰算法)(转)

    1 FIFO 1.1. 原理 按照“先进先出(First In,First Out)”的原理淘汰数据. 1.2. 实现 FIFO队列,具体实现如下: 1. 新访问的数据插入FIFO队列尾部,数据在FI ...

  5. httplib 和 httplib2区别之 gzip解压

    HTTP请求头Accept-encoding: gzip信息告诉服务器,如果它有任何新数据要发送给时,请以压缩的格式发送.如果服务器支持压缩,它将返回由 gzip 压缩的数据并且使用Content-e ...

  6. AngularJS的控制器示例

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularjsCtrl.rar 代码: <!DOCTYPE HTML PUBLIC &q ...

  7. Hibernate中的session和load延迟载入矛盾问题，怎样解决？

    假设延迟载入出现session close的情况下 方法1.在web.xml中配置spring的openSessionInViewFilter <filter>  <filter-n ...

  8. MySQL的timeout那点事

    http://www.mysqlops.com/2011/11/24/mysql_timeout.html

  9. PHP几种抓取网络数据的常见方法

    //本小节的名称为 fsockopen,curl与file_get_contents,具体是探讨这三种方式进行网络数据输入输出的一些汇总.关于 fsockopen 前面已经谈了不少,下面开始转入其它. ...

  10. ubuntu + lamp + laravel 环境配置

    首先是LAMP 安装顺序是 A(Apache服务器)  M(Mysql) P(Php) 安装apache sudo apt-get install apache2 安装mysql sudo apt-g ...