<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="turnleft">向左转</button>
<button id="turnright">向右转</button>
<div>
<img src="select-bg.png" id="myimg"/>
</div>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script>
(function($) {
var isIe = $.browser.msie;
function rotateIe(node , num) {
if(node.is(":hidden")) {
node.show();
}
node.css("filter" , "progid:DXImageTransform.Microsoft.BasicImage(Rotation=" + num + ")");
}
function rotateW3(node , num) {
if(node.is(":visible")) {
node.hide();
}
var canvas = node.next();
if(!canvas.length || !canvas.is("canvas")) {
canvas = $("<canvas>").insertAfter(node);
}
var w = node.width();
var h = node.height();
var wh = [[w,h] , [h,w] , [w,h] , [h,w]];
var se = [[0,0] , [0,-h] , [-w,-h] , [-w,0]];
canvas.attr({
width : wh[num][0],
height: wh[num][1]
});
var ctx = canvas[0].getContext("2d");
if(num != 0) {
ctx.rotate(90 * num * Math.PI/180);
}
ctx.drawImage(node[0],se[num][0],se[num][1]);
}
$.fn.rotateRight = function(d) {
return this.each(function() {
var $this = $(this);
var num = $this.data("rotate");
if(num === null) {
num = 0;
}
num++;
if(num == 4) {
num = 0;
}
$this.data("rotate" , num);
if(isIe) {
rotateIe($this , num);
} else {
rotateW3($this , num);
}
});
};
$.fn.rotateLeft = function() {
return this.each(function() {
var $this = $(this);
var num = $this.data("rotate");
if(num === null) {
num = 4;
}
num--;
if(num == -1) {
num = 3;
}
$this.data("rotate" , num);
if(isIe) {
rotateIe($this , num);
} else {
rotateW3($this , num);
}
});
};
})(jQuery);
(function() {
$(function() {
$("#turnright").click(function() {
$("#myimg").rotateRight();
});
$("#turnleft").click(function() {
$("#myimg").rotateLeft();
});
});
})(jQuery);
</script>
</body>
</html>
分享到：
相关推荐
在Android开发中，实现类似支付宝五福图片翻转效果，主要涉及到的是视图动画（View Animation）或帧动画（Frame Animation）以及自定义View的知识。Android Studio作为Android开发的官方集成开发环境，提供了丰富的...
图片翻转则是通过`Flip`方法完成的，它接受两个参数：第一个参数`flipCode`表示翻转方向，第二个参数`dst`用于存储翻转后的图像。 1. **垂直翻转**： `flipCode`设置为1，表示沿着水平轴（X轴）翻转。 ```csharp...
- 图片翻转分为水平翻转和垂直翻转。同样使用`AffineTransform`，但这次是设置缩放因子。水平翻转是在X轴上设置-1，垂直翻转是在Y轴上设置-1。 ```java // 水平翻转 AffineTransform flipHorizontally = new ...
4. **图片翻转**：翻转图片分为水平翻转（镜像）和垂直翻转。水平翻转使用`DrawImage`方法的第二个参数设置`Rectangle`，使其宽度和原图相同，高度为负值；垂直翻转则使高度相同，宽度为负值。例如，水平翻转： ```...
在网页开发中，图片的旋转功能是一个常见的需求，特别是在用户上传照片或进行图像展示时。"图片旋转支持所有浏览器"这个主题聚焦于如何实现在不同的浏览器环境下，对图片进行旋转操作的技术实现。以下是对这个主题的...
在JavaScript（JS）编程中，实现鼠标放置图片翻转特效是一种增强用户体验的常见技术，尤其在网站设计和交互式应用中。这个"JS鼠标放置图片翻转特效"提供了当鼠标悬停在图片上时，图片产生3D翻转效果的源码。这种效果...
图片翻转不同于旋转，它是将图片沿着水平或垂直方向进行翻转。在PHP中，要实现沿X轴或Y轴翻转图片，需要自己编写函数。沿Y轴翻转是水平翻转，而沿X轴翻转是垂直翻转。 沿Y轴翻转图片的PHP函数示例如下： ```php ...
2. 图片翻转： - 水平翻转：图像沿水平轴对称，相当于在镜像前看图像，左右方向相反。 - 垂直翻转：图像沿垂直轴对称，上下方向相反。 3. 实现方法： - 图像处理软件：如Adobe Photoshop、GIMP等提供了直观的...
这个名为"图片旋转，拖动，伸缩"的项目是用C#编程语言实现的一个图像处理程序，它提供了丰富的功能，包括图片的旋转、翻转、拖放操作、镜像拼接以及缩放等。下面我们将深入探讨这些知识点。 首先，图片旋转是图像...
在这个“易语言图片旋转”主题中，我们将探讨如何使用易语言来处理图像的旋转、翻转等操作。 在计算机图形学中，图像的旋转和翻转是常见的图像处理技术。这些操作通常涉及到矩阵运算和图像像素的重新映射。在易语言...
JS（JavaScript）作为网页开发中的重要脚本语言，被广泛用于实现各种交互效果，其中包括挂盘式图片翻转广告和图片广告轮播。本文将详细讲解这两种广告形式的原理、实现方法以及它们在网页设计中的应用。 一、挂盘式...
在本项目中，我们主要探讨如何使用C#编程语言结合Intel的OpenVINO工具套件进行图片旋转角度的检测。OpenVINO（Open Visual Inference and Neural Network Optimization）是一个强大的平台，它允许开发者快速地在各种...
【JavaScript图片翻转效果详解】 在网页设计中，动态效果总是能吸引用户的注意力，增加交互体验。"js精美图片翻转"就是一个实现此类效果的例子，它利用JavaScript编程语言，配合CSS样式，为网页中的图片添加了翻转...
在本文中，我们将深入探讨如何使用CSS3的`transform`属性来实现一个令人惊叹的3D图片旋转木马效果。CSS3的`transform`特性为Web开发者提供了强大的能力，可以对元素进行平移、旋转、缩放和扭曲等多种变换，从而创造...
Java实现图片翻转以及任意角度旋转 Java实现图片翻转以及任意角度旋转是图像处理中的一种常见操作。通过使用Java中的Graphics2D类，可以实现图片的翻转、任意角度旋转、缩放等操作。在本文中，我们将详细介绍如何...
3. **图片翻转**：用户可以对图片进行水平或垂直翻转，提供了一种灵活的视角切换方式。这同样基于图像的矩阵变换，通过设置相应的翻转系数完成。 **二、兼容性** 为了确保广泛的用户覆盖，JavaScript图片查看器...
本资源“图片特效-类新浪图片翻转模式”就是一种模仿新浪网站的图片展示方式，它允许用户在浏览图片时实现翻转效果，增加了互动性和趣味性。 这个压缩包包含以下文件： 1. `index.html`：这是主网页文件，通常包含...
图片翻转可以通过改变`scaleX`或`scaleY`实现。水平翻转设置`scaleX(-1)`，垂直翻转设置`scaleY(-1)`。 ```javascript function flipImage(horizontal, vertical) { const ctx = rotatedCanvas.getContext('2d'); ...
在本资源中，我们主要探讨的是使用jQuery实现的图片翻转和翻页效果。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。在这个压缩包中，提供了六个不同的实例，展示...
图片旋转是计算机图形学中的一个常见任务，尤其在图像处理和多媒体应用中。这个压缩包提供的资源似乎包含了一个动态链接库（DLL）和相应的源代码，用于实现图像任意角度旋转的功能，并且支持多种编程语言，如C、C++...