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

<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. A Good User Interface

    has high conversion rates and is easy to use. In other words, it's nice to both the business side as ...

  2. Android -- 开机启动无界面后台程序

    简单的说,这是一个没有界面的后台运行的应用程序 而且,还有一功能:开机自启动,启动运行一个服务 程序结构非常简单,两个类,一个是service的扩展类,一个是BroadcastReceiver扩展类 ...

  3. DLL注入新姿势：反射式DLL注入研究

    在分析koadic渗透利器时,发现它有一个注入模块,其DLL注入实现方式和一般的注入方式不一样.搜索了一下发现是由HarmanySecurity的Stephen Fewer提出的ReflectiveD ...

  4. JavaScript 推断浏览器类型及32位64位

    JS推断出版本号以及浏览器类型 <script type="text/javascript"> var Sys = {}; var ua = navigator.use ...

  5. 使用Lua 局部变量来优化性能,同一时候比較局部变量和全局变量

    在竞争激烈的游戏行业中,尤其页游,面对策划复杂和频繁的需求,使用脚本能够减少难度和成本.在使用Lua的过程中,会常常訪问全局变量来作为配置文件. 在訪问全局变量时,能够通过局部变量引用全局变量来优化. ...

  6. C++11 并发指南二(std::thread 详解)（转）

    上一篇博客<C++11 并发指南一(C++11 多线程初探)>中只是提到了 std::thread 的基本用法,并给出了一个最简单的例子,本文将稍微详细地介绍 std::thread 的用 ...

  7. android中的常见对话框

    在android中对话框是一种常见的操作,常见的对话框有下面几种: 以下是xml布局文件: <LinearLayout xmlns:android="http://schemas.an ...

  8. restframework-总结

    1. 规范 - 版本控制 - 部署专用的域名(防止跨域攻击) - 因为restframework又称为面向资源的编程所以url名词需要用专业的名词去表示 - 请求方式method - url上可以传递 ...

  9. python-tornado操作

    Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了能有效 ...

  10. JAVA 数据筛选（第一笔数据与第二笔数据比较）

    第一笔数据与第二笔数据比较 Map<String, Object> jHpictureMap = new HashMap<String, Object>(); // 存放照片S ...