html 图片翻转
var Lb = false; var Ub = false;
function rotate(obj) {
if (obj == "L") { if (Lb == false) { //第一次
document.getElementById("img1").classList.add("flipx");
} else {
document.getElementById("img1").classList.remove("flipx");
}
Lb = !Lb;
}
if (obj == "U") { if (Ub == false) { //第一次
document.getElementById("img1").classList.add("flipy");
} else {
document.getElementById("img1").classList.remove("flipy");
}
Ub = !Ub;
}
}
/*水平翻转*/
.flipx {
-moz-transform: scaleX(-);
-webkit-transform: scaleX(-);
-o-transform: scaleX(-);
transform: scaleX(-);
/*IE*/
filter: FlipH;
} /*垂直翻转*/
.flipy {
-moz-transform: scaleY(-);
-webkit-transform: scaleY(-);
-o-transform: scaleY(-);
transform: scaleY(-);
/*IE*/
filter: FlipV;
}
html 图片翻转的更多相关文章
- 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 ...
- gl.TexSubImage2D 使用遇到图片翻转的问题
这2天在用gl.TexSubImage2D把几张小图转拼接成大图,如果在渲染物体之前拼接好就没有问题,但在开始渲染物体后拼接就会有问题.后来我做了2件事情来找原因, 1. 用拼好的图来画一个正方形,大 ...
- JavaScript图片翻转
<script type="text/javascript"> /** * 注册函数f,当文档加载问成时执行这个函数f * 如果文件已经载入完成,尽快以异步方式执行它 ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- CSS3图片翻转动画技术详解
CSS动画非常的有趣:这种技术的美就在于,通过使用很多简单的属性,你能创建出漂亮的消隐效果.其中代表性的一种就是CSS图片翻转效果,能让你看到一张卡片的正反两面上的内容.本文就是要用最简单的方法向大家 ...
- div 中图片溢出问题及 CSS3中图片翻转问题
如果设置一个div 装两张以上的图片,如果不设置好div的宽度和高度,就会使图片溢出. 我们知道,div是可以由图片撑开其宽高的,也就是说如果只放一张图片的情况下,不设置div的宽高,div的宽高会默 ...
- Javascript实现图片翻转
使用Js的对象属性能实现简单的翻转效果.通过onMouseover事件和onMouseOut事件就能实现鼠标移到链接上和移开链接发生反应.给两个图片加上链接实现都能翻转的效果. reverse.htm ...
- 【应用】图片翻转js
图片翻转:图片随着鼠标指针划过进行替换 <img src="example.gif" onmouseover="this.src='exampleTwo.gif'& ...
- 原生js如何实现图片翻转旋转效果?
原生js如何实现图片翻转旋转效果? 一.总结 1.通过给元素设置style中的transition来实现的. 2.我昨天纠结的效果全部可以通过精读这个代码后实现. 二.原生js如何实现图片翻转旋转效果 ...
随机推荐
- HBase(0.96)新的Java API操作
package test; import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.ap ...
- MRO 方法解释顺序
MRO是用在多重继承中的.考虑这种情况,整个环境中父类是两个 P1,P2 子类是两个 C1,C2 而 孙子类是G1. 我们知道 G1会从 P1,P2,C1,C2中继承属性,但是如果有多个属性重名,那么 ...
- MVC.NET:提供对字体文件.woff的访问
在我们的项目中如果使用到了Bootstrap框架的话,通常都必须要支持对其自带的glyphicons-halflings-regular的font文件的访问. 诸如在MVC.NET中,如果一开始什么设 ...
- JS 带运动的返回顶部 小案例
带运动的返回顶部:当滚动条在滚动的时候,滚动鼠标的滚轮,应该让滚动条停止滚动,清掉定时器.下面的方法b 就是清掉的方法 <!DOCTYPE html PUBLIC "-//W3C//D ...
- POJ 3370 Halloween treats 鸽巢原理 解题
Halloween treats 和POJ2356差点儿相同. 事实上这种数列能够有非常多,也能够有不连续的,只是利用鸽巢原理就是方便找到了连续的数列.并且有这种数列也必然能够找到. #include ...
- SQL Server 2012内部原理及故障排除(专栏)
PROFESSIONAL SQL SERVER® 2012 INTERNALS AND TROUBLESHOOTING一书(可从这里下载).认为内容非常不错.自己也想对SQL Server 2012有 ...
- ext4文件系统制作 - make_ext4fs 参数介绍【转】
本文转载自:http://blog.csdn.net/u011784994/article/details/53816976 make_ext4fs用于Android平台上制作ext4文件系统的镜像. ...
- Android+Jquery Mobile学习系列(5)-SQLite数据库
SQLite是轻量级的.嵌入式的.关系型数据库,目前已经在iPhone.Android等手机系统中使用,SQLite可移植性好,很容易使用,很小,高效而且可靠. 因为Android已经集成了SQLit ...
- Stockbroker Grapevine(floyd)
http://poj.org/problem?id=1125 题意: 首先,题目可能有多组测试数据,每个测试数据的第一行为经纪人数量N(当N=0时, 输入数据结束),然后接下来N行描述第i(1< ...
- Python 35 线程(1)线程理论、开启线程的两种方式
一:线程理论 1 什么是线程 进程其实一个资源单位,而进程内的线程才是cpu上的执行单位 线程其实指的就是代码的执行过程2 为何要用线程 线程vs进程 1. 同一进程下的多个线程共享该进程 ...