`
koudailidexiaolong
  • 浏览: 96163 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

html中实现图片的旋转

 
阅读更多

<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实现图片中心旋转

    简单的html中js实现图片中心旋转

    HTML5实现图片拖动,旋转,放大,拉伸等特效

    HTML5实现图片拖动,旋转,放大,拉伸等特效 效果详情参考http://www.xwcms.net/webAnnexImages/fileAnnex/20131031/91857/index.html

    CSS3 transform实现图片旋转木马3D

    在本文中,我们将深入探讨如何使用CSS3的`transform`属性来实现一个令人惊叹的3D图片旋转木马效果。CSS3的`transform`特性为Web开发者提供了强大的能力,可以对元素进行平移、旋转、缩放和扭曲等多种变换,从而创造...

    jquery-fancybox扩展实现图片旋转

    本文将详细介绍如何利用 jQuery Fancybox 扩展实现图片旋转功能。 ### 1. Fancybox 简介 Fancybox 是一个基于 jQuery 的插件,它的主要特点包括响应式设计、自定义样式和丰富的交互功能。通过简单的 HTML 标签或 ...

    JS实现图片旋转

    在图片旋转中,我们主要使用`canvas`元素和与其相关的`context`对象提供的方法。 1. **加载图片**:首先,我们需要获取到图片资源。这通常通过创建一个`Image`对象,并设置其`src`属性来实现。当图片加载完成时,会...

    Html5+CSS3实现3D旋转效果

    在本主题中,我们将深入探讨如何使用HTML5和CSS3的特性来实现3D旋转效果,这是一种强大的视觉表现手法,可以为网页增添动态和立体感。 首先,HTML5提供了`&lt;canvas&gt;`元素,用于在浏览器中进行图形绘制。然而,在实现...

    HTML+CSS简单实现图片旋转放大展示功能

    接下来,我们要在CSS文件`style.css`中编写样式,实现图片的旋转和放大效果: ```css .image-container { position: relative; display: inline-block; overflow: hidden; } .rotate-zoom { transition: ...

    html5图片旋转

    在这个“HTML5图片旋转”的主题中,我们将深入探讨Canvas如何实现图片的旋转效果。 Canvas是HTML5中的一个二维绘图上下文,通过JavaScript API,开发者可以像在画布上绘画一样绘制图像、线条、形状等。在Canvas上...

    纯js实现360度旋转预览图片特效

    在这个特效中,用户可以通过滑块控制或者直接使用鼠标与图片互动,实现图片360度全方位的旋转查看。下面我们将详细探讨这一技术的实现原理和涉及到的关键知识点。 首先,我们来看【标签】中的"jQuery库"。jQuery是...

    javascript 实现的 图片旋转功能

    JavaScript是一种广泛应用于...综上,JavaScript实现的图片旋转功能涉及了HTML5 Canvas技术、图形变换、事件处理、性能优化等多个方面,通过这些技术可以创建出用户友好的图片旋转工具,满足用户在上传图片时的需求。

    css实现图片旋转效果

    要使一张图片旋转,可以使用`transform`属性中的`rotate()`函数。例如,如果我们有一个ID为`image1`的图片元素,我们可以这样设置: ```css #image1 { transform: rotate(45deg); } ``` 上述代码将使图片旋转45度...

    JQ实现图片旋转

    在本文中,我们将深入探讨如何使用JavaScript(JS)和jQuery(JQ)库来实现图片旋转,以及一种独特的“球形旋转”效果和字母更换的技巧。这些技术在网页动态展示、用户交互以及创意设计中都非常有用。 首先,我们要...

    Javascript与HTML5的canvas实现图片旋转效果

    在实现图片旋转效果时,我们需要先加载图片,然后将其绘制到Canvas上。使用`drawImage()`方法可以完成这一任务: ```javascript var img = new Image(); img.src = 'path/to/your/image.jpg'; img.onload = ...

    HTML5实现3D旋转球

    在这个案例中,"HTML5实现3D旋转球"是一个基于HTML5的3D图形展示项目,主要利用了HTML5的Canvas元素以及JavaScript来创建动态的3D球体旋转效果。Canvas作为HTML5的一个核心特性,允许开发者在网页上绘制2D和3D图形,...

    图片旋转支持所有浏览器

    通过合理运用CSS3的transform属性和JavaScript技术,我们可以实现图片在各种浏览器中的旋转,并通过服务器端处理或前端优化来提高用户体验。同时,结合用户交互设计,可以提供更加直观和便捷的图片操作体验。

    JS+Html图片放大缩小旋转拖动效果

    4. **图片旋转**:旋转功能可以通过CSS的`transform`属性中的`rotate()`函数实现。可以设置一个变量记录当前旋转角度,每次点击旋转按钮时,增加或减少一定的角度值。 5. **拖动查看**:图片拖动查看需要用到鼠标或...

    html5 简单图片旋转效果

    在本例中,我们将关注HTML5中的图像旋转功能,这是一个利用HTML、CSS以及JavaScript实现的简单图片旋转效果。 首先,HTML5中的`&lt;canvas&gt;`元素是实现这一效果的关键。`&lt;canvas&gt;`元素允许我们在网页上进行动态图形...

    3D旋转图片的html样式

    通过JavaScript与`&lt;canvas&gt;`的交互,可以实现图片的旋转动画。 JavaScript是实现动态3D旋转的关键。它可以通过操作DOM(文档对象模型)来改变元素的样式,例如旋转角度。使用CSS3的`transform`属性,可以设置元素的...

    js实现图片旋转功能

    在JavaScript中实现图片旋转功能是Web开发中常见的一项任务,特别是在社交媒体应用如微博中,用户可能需要预览或编辑上传的图片。以下是一份详细的关于如何使用JavaScript实现图片旋转功能的知识点总结: **1. HTML...

Global site tag (gtag.js) - Google Analytics