使用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. iOS 多Target， Other link Flag

    在创建多个马甲包或者多个App间只有很小的差异是使用多Target是一种很好的方法 https://www.jianshu.com/p/18db54655246 1:选中原始的Target, 点击右键 ...

  2. 操作系统（Operating System，OS）

    操作系统(Operating System,OS) 是配置在计算机硬件上的第一层软件,是对计算机硬件系统的首次扩充,是一个计算机系统最基础,也是最重要的系统软件. 操作系统的作用 1 实现对计算机资源 ...

  3. [小tips]使用vscode，根据vue模板文件生成代码

    本着苍蝇虽小也是肉的精神...... 目标: 我们希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容. 方法: 打开VSCODE编辑器,依次选择"文件 -> ...

  4. 简单HOG+SVM mnist手写数字分类

    使用工具 :VS2013 + OpenCV 3.1 数据集:minst 训练数据:60000张 测试数据:10000张 输出模型:HOG_SVM_DATA.xml 数据准备 train-images- ...

  5. Python3模块: hashlib

    简介: 用于加密相关的操作,代替了md5模块和sha模块,主要提供SHA1,SHA224,SHA256,SHA384,SHA512,MD5算法. 在python3中已经废弃了md5和sha模块,简单说 ...

  6. LODOP内嵌挡住浏览器的div弹出层

    首先,做一个简单的div弹出层用于测试,该弹出层的介绍可查看本博客另一篇博文:[JS新手教程]浏览器弹出div层 然后加入LODOP内嵌,LODOP可以内嵌,C-LODOP不能内嵌,可以在IE等浏览器 ...

  7. Spring Security构建Rest服务-1201-Spring Security OAuth开发APP认证框架之实现服务提供商

    实现服务提供商,就是要实现认证服务器.资源服务器. 现在做的都是app的东西,所以在app项目写代码  认证服务器: 新建 ImoocAuthenticationServerConfig 类,@Ena ...

  8. Servlet基础知识点

    一.web.xml 的加载顺序是: ServletContext-> context-param ->listener -> filter -> servlet,而同个类型之间 ...

  9. 编写Android程序Eclipse连不上手机。

    主要问题有: 1.开发者选项没有开启 2.设备管理器中MTP有黄色小叹号 3.ADB异常. 问题1容易解决. 问题2,3困扰了我很长时间,网上的很多解决方法是下载安装MTP驱动,或者直接右击更新驱动. ...

  10. HUE配置文件hue.ini 的yarn_clusters模块详解（图文详解）（分HA集群和非HA集群）

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...