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

　　reverse.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>图片翻转Demo</title>

<style type="text/css">

h1{color:yellow;

text-align:center;}

</style>

</head>

<body>

<h1>实现图片翻转</h1>

<img src="smile.jpg" name="smileimage"

onMouseOver="window.document.smileimage.src='smilereverse.jpg';"

onMouseOut="window.document.smileimage.src='smile.jpg';"

>

<br>

<p>

<a href="#"

onMouseOver="window.document.smileimage.src='smilereverse.jpg';"

onMouseOut="window.document.smileimage.src='smile.jpg';"

><img src="submit.png" name="turn" border="0" width="298" height="68"></a>

</p>

</body>

</html>

　　

Javascript实现图片翻转的更多相关文章

  1. JavaScript图片翻转

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

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

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

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

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

  4. 【应用】图片翻转js

    图片翻转:图片随着鼠标指针划过进行替换 <img src="example.gif" onmouseover="this.src='exampleTwo.gif'& ...

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

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

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

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

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

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

  8. 前端学习 第七弹： Javascript实现图片的延迟加载

    前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img    src="" x-src="/acsascas ...

  9. JavaScript校验图片格式及大小

    <!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...

随机推荐

  1. const的详解

    1.const的成员变量 常成员变量的值不能被更新,将在构造函数时候进行初始化 2.const的成员函数 常成员函数只能调用常成员函数,常成员函数不能修改任何成员变量的数值 3.const的成员对象 ...

  2. D - 统计同成绩学生人数

    点击打开链接 读入N名学生的成绩,将获得某一给定分数的学生人数输出.  Input 测试输入包含若干测试用例,每个测试用例的格式为  第1行:N  第2行:N名学生的成绩,相邻两数字用一个空格间隔.  ...

  3. 【2019年OCP新题】OCP题库更新出现大量新题-11

    11.Your database is in archivelog mode. You want to disable archiving for the database. Examine thes ...

  4. Nginx + uWSGI 部署Django 项目,并实现负载均衡

    一.uWSGI服务器 uWSGI是一个Web服务器,它实现了WSGI协议.uwsgi.http等协议.Nginx中HttpUwsgiModule的作用是与uWSGI服务器进行交换. 要注意 WSGI ...

  5. Mac 切换到行首和行末的方法

    苹果笔记本没有home键和end键 但是使用 command + 方向键左键可以回到行首, command + 方向键右键可以去到行末

  6. nodejs 像 C 语言那样输出当前代码的行数

    http://stackoverflow.com/questions/11386492/accessing-line-number-in-v8-javascript-chrome-node-js Ob ...

  7. mybatis3.4与spring3.2.5整合出现的问题

    错误信息: Exception in thread "main" java.lang.AbstractMethodError: org.mybatis.spring.transac ...

  8. 程序猿的日常——Java基础之clone、序列化、字符串、数组

    其实Java还有很多其他的基础知识,在日常工作技术撕逼中也是经常被讨论的问题. 深克隆与浅克隆 在Java中创建对象有两种方式: 一种是new操作符,它创建了一个新的对象,并把对应的各个字段初始化成默 ...

  9. 【Azure】Publish Error of "%(TargetOSFamily.Identity)" that evaluates to "" instead of a number

    在向Azure部署程序的时候,出现如下错误: A numeric comparison was attempted on "%(TargetOSFamily.Identity)" ...

  10. （转）AIX下镜像制作与取消，更换硬盘问题

    AIX下镜像制作与取消,更换硬盘问题 ROOTVG做镜像问题: 下面命令全部在AIX5.4上运行通过 # lspv hdisk0      000a1ddc7f36a2f0      rootvg   ...