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如何实现图片翻转旋转效果 ...
随机推荐
- 【codeforces 767D】Cartons of milk
[题目链接]:http://codeforces.com/problemset/problem/767/D [题意] 每个牛奶都有最晚可以喝的时间; 每天喝K瓶牛奶; 你有n瓶牛奶->已知每个牛 ...
- 树状数组&线段树
先是树状数组. 令这棵树的结点编号为C1,C2...Cn.令每个结点的值为这棵树的值的总和,那么容易发现: C1 = A1 C2 = A1 + A2 C3 = A3 C4 = A1 + A2 + A3 ...
- (39.2). Spring Boot Shiro权限管理【从零开始学Spring Boot】
(本节提供源代码,在最下面可以下载) (4). 集成Shiro 进行用户授权 在看此小节前,您可能需要先看: http://412887952-qq-com.iteye.com/blog/229973 ...
- 清北学堂模拟赛d4t4 a
分析:感觉和dp的状态转移方式有点类似,对于一个数,你不能看有多少个状态能转移到它,你要看它能转移到多少个状态,相当于刷表法和填表法的区别,对于这道题也是一样,我们不能看有多少个数是x的倍数,而是每次 ...
- [Poj2112][USACO2003 US OPEN] Optimal Milking [网络流,最大流][Dinic+当前弧优化]
题意:有K个挤奶机编号1~K,有C只奶牛编号(K+1)~(C+K),每个挤奶机之多能挤M头牛,现在让奶牛走到挤奶机处,求奶牛所走的最长的一条边至少是多少. 题解:从起点向挤奶机连边,容量为M,从挤奶机 ...
- Flume安装部署
Flume安装部署 Flume的安装(非常简单) 上传安装包到数据源所在节点上,实际上不是数据源节点也是可以的,只要运行Flume的这台机器与数据源节点的这台机器能够通过某种协议进行通信即可. 然后解 ...
- cogs 315. [POJ3255] 地砖RoadBlocks
315. [POJ3255] 地砖RoadBlocks ★★★ 输入文件:block.in 输出文件:block.out 简单对比时间限制:1 s 内存限制:128 MB Descri ...
- N天学习一个linux命令之sort
用途 对文本内容按行排序,输出排好序后的内容到标准输出流 用法 sort [OPTION]... [FILE]... sort [OPTION]... --files0-from=F 常用选项 -b, ...
- [Python]croppic 裁剪图片的Python后台实现
import cStringIO import io import base64 from PIL import Image, ImageTk def img_crop_to_file(request ...
- VMware镜像文件下载
VMware镜像文件下载 http://blog.sina.com.cn/s/blog_517c21c00102x5ja.html 貌似Centos 6不能下载啊: 其他的没有测试: