使用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. MPLS 网络中的 MTU

    MPLS MTU的大小可以设置为64-65535之间,在MPLS网络中,标签的大小是计入到MTU中的,所以在MPLS网络MTU是一个常见的问题.     在Ethernet接口上,一般数据最长为150 ...

  2. JQuery Mobile - 为什么绑定事件后会被多次执行？

    JQuery Mobile 在绑定事件时候,发现会被多次执行,为什么啊? 原来,jquery click  不是替换原有的function ,而是接着添加,所以才会执行次数越来越多,怎么办才能按需实现 ...

  3. C - 前m大的数 （结构体）

    点击打开链接 还记得Gardon给小希布置的那个作业么?(上次比赛的1005)其实小希已经找回了原来的那张数表,现在她想确认一下她的答案是否正确,但是整个的答案是很庞大的表,小希只想让你把答案中最大的 ...

  4. Docker registry 私有仓库镜像查询、删除、上传、下载 shell

    #Docker官方私有仓库registry #官方只提供了API接口,不方便使用,就写了个shell #docker-registry安装配置http://www.cnblogs.com/elvi/p ...

  5. python操作mongodb实例

    安装pymongo扩展 import pymongo; client = pymongo.MongoClient(host='10.48.176.170',port=27017); db = clie ...

  6. webpack快速入门——打包后如何调试

    在配置devtool时,webpack给我们提供了四种选项. source-map:在一个单独文件中产生一个完整且功能完全的文件.这个文件具有最好的source map,但是它会减慢打包速度: che ...

  7. linux的hostname(主机名)修改详解

    Linux操作系统的hostname是一个kernel变量,可以通过hostname命令来查看本机的hostname.也可以直接cat /proc/sys/kernel/hostname查看. #ho ...

  8. iOS-实现对象拷贝【对象拷贝】

    对象引用 NSCopying 代理 .h @interface xk : NSObject <NSCopying> @property (nonatomic, copy) NSString ...

  9. 【C#小知识】C#中一些易混淆概念总结(四)---------解析Console.WriteLine() 分类： C# 2014-02-05 17:18 1060人阅读 评论(0) 收藏

    目录: [C#小知识]C#中一些易混淆概念总结 [C#小知识]C#中一些易混淆概念总结(二) [C#小知识]C#中一些易混淆概念总结(三) ------------------------------ ...

  10. MVC与MVVM设计模式理解

    MVC设计模式(View和Model之间不能直接通信) MVC是一种架构模式,M表示Model,V表示视图View,C表示控制器Controller: Model负责存储.定义.操作数据.从网络中获取 ...