Javascript实现图片翻转
使用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实现图片翻转的更多相关文章
- JavaScript图片翻转
<script type="text/javascript"> /** * 注册函数f,当文档加载问成时执行这个函数f * 如果文件已经载入完成,尽快以异步方式执行它 ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- 【应用】图片翻转js
图片翻转:图片随着鼠标指针划过进行替换 <img src="example.gif" onmouseover="this.src='exampleTwo.gif'& ...
- 原生js如何实现图片翻转旋转效果?
原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...
- CSS3图片翻转切换案例及其中重要属性解析
图片翻转切换,在不使用CSS3的情况下,一般都是使用JS实现动画,同时操作元素的width和left,或者height和top以模拟翻转的效果,并在适当时候改变src或者z-index实现图片切换. ...
- 自己积累的一些Emgu CV代码(主要有图片格式转换,图片裁剪,图片翻转,图片旋转和图片平移等功能)
using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...
- 前端学习 第七弹: Javascript实现图片的延迟加载
前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img src="" x-src="/acsascas ...
- JavaScript校验图片格式及大小
<!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...
随机推荐
- JS - ECMAScript2015(ES6)新特性
友情提示:本文仅mark几个常用的新特性,详细请参见:ES6入门 - ryf: 碎片 var VS let VS const var:声明全局变量, let:声明块级变量,即局部变量 const:声明 ...
- UITableView 的常用可复制代码
UITableView是使用中最常用的工具,下面列举一个常用的tableview类,以后直接复制代码,稍作修改,就能用了. #import "ViewController.h" @ ...
- 二叉排序树的理解和实现(Java)
二叉排序树的定义和性质 二叉排序树又称二叉排序树.它或者是一个空树,或者是一个具有下列性质的二叉树: 若它的左子树不空,则左子树上所有节点的值均小于它的根结构的值 若它的右子树不空,则右子树上所有结点 ...
- 用postman做接口测试实例
使用postman做接口测试,可以选择请求方式,可以直接输入参数和header,可以编写测试结果的代码,判断是否通过测试 下图为填写接口测试地址.填写接口的参数,点击send发送请求 其中,Param ...
- Swift 中@available 和 #available
Swift 2.0 中,引入了可用性的概念.对于函数,类,协议等,可以使用@available声明这些类型的生命周期依赖于特定的平台和操作系统版本.而#available用在判断语句中(if, gua ...
- POJ 2253
#include<iostream> #include<stdio.h> #include<math.h> #include<iomanip> #def ...
- (转)如何修改windows下mysql的字符集
原文:http://blog.csdn.net/yjz_sdau/article/details/52135050 (1) 最简单的修改方法,就是修改mysql的my.ini文件中的字符集键值, 如 ...
- Java之IO(十三)File、Filter、Piped、String和InputStreamReader与OutputStreamWriter
转载请注明原出处:http://www.cnblogs.com/lighten/p/7264196.html 1.前言 断更一段时间,计划果然赶不上变化(还是太懒...).这次一次性将剩余的5组字符流 ...
- 再学Java 之 private、protected、public和default的作用域
前言:如果提到protected的访问控制级别,您的第一反应是”只能是子类才可以访问“,那么您很可能需要往下看. 首先,大致介绍一下各个访问控制符的访问控制级别(具体的介绍很多大牛的博文都有介绍,我就 ...
- Java后台 解析JSON的几个方法
1.对象转JSON对象. public static void main(String[] args) { Domain demo = new Domain( "在线JSON校验格式化工具 ...