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

<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. 配置laravel的nginx站点

    server{}配置 server{ #端口配置 listen 80; #域名配置 server_name laravel.cc; index index.php index.html index.h ...

  2. 终极报错解决方案：Error:Execution failed for task ':app:processDebugManifest'. > Manifest merger failed with

    遇到这个报错的时候,不要慌 Error:Execution failed for task ':app:processDebugManifest'. > Manifest merger fail ...

  3. Go Programming Blueprints 读书笔记（谈到了nsq／mgo处理数据持久化，可是业务逻辑不够复杂）

    Go Programming Blueprints http.Handle("/", &templateHandler{filename: "chat.html& ...

  4. 最长连续序列(Longest Consecutive Sequence)

    Given an unsorted array of integers, find the length of the longest consecutive elements sequence. F ...

  5. js json 对象

    JSON 语法规则 JSON 语法是 JavaScript 对象表示法语法的子集. 数据在名称/值对中 数据由逗号分隔 大括号保存对象 中括号保存数组 JSON 名称/值对 JSON 数据的书写格式是 ...

  6. SpringMVC：文件上传

    MultipartFile attach HttpServletRequest re commons-io-2.0.jar (一定要用2.0以上的版本,否则没有copyInputStreamToFil ...

  7. GB28181对接视频流

    今天抽空写下以GB28181的方式获取摄像机视频流以备后用,同时也希望能帮助到正着手开发GB28181对接视频的同学,这块的资料实在不多. 今天讲的内容不涉及到平台对接,平台对接下次有时间再讲,平台对 ...

  8. 重温.NET下Assembly的加载过程 ASP.NET Core Web API下事件驱动型架构的实现（三）：基于RabbitMQ的事件总线

    重温.NET下Assembly的加载过程   最近在工作中牵涉到了.NET下的一个古老的问题:Assembly的加载过程.虽然网上有很多文章介绍这部分内容,很多文章也是很久以前就已经出现了,但阅读之后 ...

  9. Django-celery分布式任务

    昨天一个很好的面试官问我你在python中怎么实现定时任务呢?我没回答好,我问了下原来有个叫celery的东西,感觉挺好用的 Celery 是一个 基于python开发的分布式异步消息任务队列,通过它 ...

  10. C# 之 集合ArrayList

    .NET Framework提供了用于数据存储和检索的专用类,这些类统称集合. 这些类提供对堆栈.队列.列表和哈希表的支持.大多数集合类实现系统的接口.以下我们主要来讲一下ArrayList.     ...