<script type="text/javascript">
function rotateRight(id){
alert(id);
var p = document.getElementById(id);
alert(p)
rotate(p);
}
function rotateLeft(id){
var p = document.getElementById(id);
rotate2(p);
}
var isIE = (document.uniqueID)?1:0;
var i=1;
function rotate(image){
//获得当前对象的父节点
var object = image.parentNode;
if(isIE){
image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";
i++;
if(i>4) {i=1};
}
else{
try{
//创建画布
var canvas = document.createElement('canvas');
//判断画布的环境是否为2D环境
if(canvas.getContext("2d")) {
//替换当前img为画布对象
object.replaceChild(canvas,image);
//指定画布的绘图环境为2D环境
var context = canvas.getContext("2d");
//旋转画布的方法
context.translate(176, 0);
//旋转的量,用弧度表示。正值表示顺时针方向旋转,负值表示逆时针方向旋转。
context.rotate(Math.PI*0.5);
//绘制一幅图像 0,0 为要绘制的图像的左上角的位置
context.drawImage(image,0,0);
}
}catch(e){}
}
}
function rotate2(image){
var object = image.parentNode;
if(isIE){
image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")";
i=i+3;
if(i>4) {i=i-4};
}
else{
try{
var canvas = document.createElement('canvas');
if(canvas.getContext("2d")){
object.replaceChild(canvas,image);
var context = canvas.getContext("2d");
context.translate(176, 0);
context.rotate2(Math.PI*0.5);
context.drawImage(image,0,0);
}
}catch(e){}
}
}
</script>
以上为js代码
<img src="driverPhoto.dagl?method=getDriverPhotoZp&daid=${driverPhotoInfo.daid }" id="daidImg" style="padding:0px;margin:0px;"/>
以上为图片的显示标签 你只要得到图片的显示标签的id传入值即可
<wbr></wbr>
分享到:
相关推荐
简单的html中js实现图片中心旋转
HTML5实现图片拖动,旋转,放大,拉伸等特效 效果详情参考http://www.xwcms.net/webAnnexImages/fileAnnex/20131031/91857/index.html
在本文中,我们将深入探讨如何使用CSS3的`transform`属性来实现一个令人惊叹的3D图片旋转木马效果。CSS3的`transform`特性为Web开发者提供了强大的能力,可以对元素进行平移、旋转、缩放和扭曲等多种变换,从而创造...
本文将详细介绍如何利用 jQuery Fancybox 扩展实现图片旋转功能。 ### 1. Fancybox 简介 Fancybox 是一个基于 jQuery 的插件,它的主要特点包括响应式设计、自定义样式和丰富的交互功能。通过简单的 HTML 标签或 ...
在图片旋转中,我们主要使用`canvas`元素和与其相关的`context`对象提供的方法。 1. **加载图片**:首先,我们需要获取到图片资源。这通常通过创建一个`Image`对象,并设置其`src`属性来实现。当图片加载完成时,会...
在本主题中,我们将深入探讨如何使用HTML5和CSS3的特性来实现3D旋转效果,这是一种强大的视觉表现手法,可以为网页增添动态和立体感。 首先,HTML5提供了`<canvas>`元素,用于在浏览器中进行图形绘制。然而,在实现...
接下来,我们要在CSS文件`style.css`中编写样式,实现图片的旋转和放大效果: ```css .image-container { position: relative; display: inline-block; overflow: hidden; } .rotate-zoom { transition: ...
在这个“HTML5图片旋转”的主题中,我们将深入探讨Canvas如何实现图片的旋转效果。 Canvas是HTML5中的一个二维绘图上下文,通过JavaScript API,开发者可以像在画布上绘画一样绘制图像、线条、形状等。在Canvas上...
在这个特效中,用户可以通过滑块控制或者直接使用鼠标与图片互动,实现图片360度全方位的旋转查看。下面我们将详细探讨这一技术的实现原理和涉及到的关键知识点。 首先,我们来看【标签】中的"jQuery库"。jQuery是...
JavaScript是一种广泛应用于...综上,JavaScript实现的图片旋转功能涉及了HTML5 Canvas技术、图形变换、事件处理、性能优化等多个方面,通过这些技术可以创建出用户友好的图片旋转工具,满足用户在上传图片时的需求。
要使一张图片旋转,可以使用`transform`属性中的`rotate()`函数。例如,如果我们有一个ID为`image1`的图片元素,我们可以这样设置: ```css #image1 { transform: rotate(45deg); } ``` 上述代码将使图片旋转45度...
在本文中,我们将深入探讨如何使用JavaScript(JS)和jQuery(JQ)库来实现图片旋转,以及一种独特的“球形旋转”效果和字母更换的技巧。这些技术在网页动态展示、用户交互以及创意设计中都非常有用。 首先,我们要...
在实现图片旋转效果时,我们需要先加载图片,然后将其绘制到Canvas上。使用`drawImage()`方法可以完成这一任务: ```javascript var img = new Image(); img.src = 'path/to/your/image.jpg'; img.onload = ...
在这个案例中,"HTML5实现3D旋转球"是一个基于HTML5的3D图形展示项目,主要利用了HTML5的Canvas元素以及JavaScript来创建动态的3D球体旋转效果。Canvas作为HTML5的一个核心特性,允许开发者在网页上绘制2D和3D图形,...
通过合理运用CSS3的transform属性和JavaScript技术,我们可以实现图片在各种浏览器中的旋转,并通过服务器端处理或前端优化来提高用户体验。同时,结合用户交互设计,可以提供更加直观和便捷的图片操作体验。
4. **图片旋转**:旋转功能可以通过CSS的`transform`属性中的`rotate()`函数实现。可以设置一个变量记录当前旋转角度,每次点击旋转按钮时,增加或减少一定的角度值。 5. **拖动查看**:图片拖动查看需要用到鼠标或...
在本例中,我们将关注HTML5中的图像旋转功能,这是一个利用HTML、CSS以及JavaScript实现的简单图片旋转效果。 首先,HTML5中的`<canvas>`元素是实现这一效果的关键。`<canvas>`元素允许我们在网页上进行动态图形...
通过JavaScript与`<canvas>`的交互,可以实现图片的旋转动画。 JavaScript是实现动态3D旋转的关键。它可以通过操作DOM(文档对象模型)来改变元素的样式,例如旋转角度。使用CSS3的`transform`属性,可以设置元素的...
在JavaScript中实现图片旋转功能是Web开发中常见的一项任务,特别是在社交媒体应用如微博中,用户可能需要预览或编辑上传的图片。以下是一份详细的关于如何使用JavaScript实现图片旋转功能的知识点总结: **1. HTML...