`

[转]图片旋转js代码

阅读更多

图片旋转js代码

function rotateImage(imgId) {

imageToRotate = document.getElementById(imgId);   

imageToRotate.style.filter= "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand')";

rotate();

}

var imageToRotate;

var degreeToRotate=0;

function rotate(){

var deg2radians = Math.PI * 180 / 360;

degreeToRotate++;

degreeToRotate=degreeToRotate%360;   

rad = degreeToRotate * deg2radians ;

costheta = Math.cos(rad);

sintheta = Math.sin(rad);

imageToRotate.filters.item(0).M11 = costheta;

imageToRotate.filters.item(0).M12 = -sintheta;

imageToRotate.filters.item(0).M21 = sintheta;

imageToRotate.filters.item(0).M22 = costheta;  

 

}

 

 

参数传图片的id即可,比较简单,使用的是IE滤镜

 

原文网址:http://www.cnblogs.com/loveLearning/archive/2012/06/23/2559564.html

分享到:
评论

相关推荐

    3D旋转幻灯banner焦点图js代码

    总的来说,3D旋转幻灯Banner焦点图js代码是网页设计中的一个高级技巧,它结合了JavaScript和CSS3的力量,为用户提供了引人入胜的交互体验。理解和掌握这种技术,对于提升网站的用户体验和视觉吸引力具有重要意义。在...

    360度旋转js代码

    总结来说,实现360度旋转的JavaScript代码主要依靠CSS3的`transform: rotate()`属性和JavaScript的`requestAnimationFrame`方法。通过结合这两个工具,你可以创建出流畅且平滑的360度旋转动画效果,为用户带来更丰富...

    超流畅漂亮的图片3D旋转滚动JS特效代码.zip

    实现效果: ...超流畅漂亮的图片3D旋转滚动JS特效代码,支持360度图片旋转滚动展示,非常适合产品图片滚动切换展示以及 各种产品图片的场景应用,可上下图片倒置切换,滚动非常流畅,难得的好JS特效代码。

    jquery图片旋转切换效果代码

    【jQuery图片旋转切换效果代码】是一种常见的网页动态展示技术,主要应用于网站的图像展示或产品介绍,通过动画效果吸引用户注意力,提升用户体验。在描述中提到的“图片可放大,从右向左自动旋转,呈立体状,颇似...

    JS卷筒式图片3D旋转展示代码

    【JS卷筒式图片3D旋转展示代码】是一款利用JavaScript技术实现的独特图片展示方式,它为用户提供了3D视觉体验,使图片展示更加生动有趣。该代码的核心是通过JavaScript实现图片的卷筒式旋转和倒影效果,为网页增添...

    JS实现网页3D旋转轮播图的源代码

    本项目"JS实现网页3D旋转轮播图的源代码"利用原生JavaScript实现了这一功能,同时结合了多属性缓动动画框架以及数组API,使得轮播效果流畅且富有层次感。 1. **多属性缓动动画框架**: 缓动动画是让元素平滑过渡到...

    JS图片旋转代码,可以向左,向右90度转动.rar

    这个"JS图片旋转代码,可以向左,向右90度转动.rar"文件提供了一个基于JavaScript的解决方案,允许用户通过点击来实现图片90度的顺时针或逆时针旋转。以下是对这个知识点的详细讲解: 1. **HTML5 Canvas**: HTML5的...

    旋转滚动的图片特效代码

    "旋转滚动的图片特效代码"是一个专门用于实现动态图像展示效果的程序。这种特效常见于网站设计、移动应用以及各种数字媒体中,它能使得静态的图片变得更加生动活泼,吸引用户的注意力。 在网页或应用程序中,旋转...

    CSS3鼠标经过图片旋转放大代码

    本案例中的“CSS3鼠标经过图片旋转放大代码”就是一个典型的利用CSS3来增强用户体验的例子。它使得用户在鼠标悬停在图片上时,图片不仅会放大,还会伴随旋转效果,为网页增添动态感和互动性。 首先,我们需要了解...

    jquery实现3D旋转轮播图片代码.zip

    【标签】:“js特效”表明这个项目主要关注JavaScript编程语言中的特效实现,而“jquery实现3D旋转轮播图片代码”则具体指明是用jQuery这个流行的JavaScript库来编写3D轮播代码。jQuery简化了DOM操作、事件处理和...

    javascript图片自动旋转

    接下来,我们将在`script.js`中编写JavaScript代码。自动旋转图片的核心思想是改变图片的CSS `transform`属性中的`rotate`值。以下是一个简单的实现: ```javascript document.addEventListener('DOMContentLoaded'...

    jQuery图片叠加点击旋转切换代码.zip

    这个功能常见于一些游戏官方网站,比如阴阳师,通过点击图片实现动态旋转和切换,为用户带来更生动的视觉体验。我们将围绕jQuery库、HTML结构以及CSS样式等方面,详细解析这一技术实现。 首先,jQuery是一个轻量级...

    js圆形图片旋转的焦点图特效代码.rar

    该压缩包文件"js圆形图片旋转的焦点图特效代码.rar"包含了一个JavaScript实现的特殊焦点图效果,这种效果使得图片以圆形的方式进行旋转切换。在网页设计中,焦点图通常被用来展示一组重要的图片,通过动态效果吸引...

    js图片旋转例子demo

    在这个“js图片旋转例子demo”中,我们将探讨如何利用JavaScript来实现图片的旋转效果,特别是在用户点击按钮时,使图片按照九十度的角度进行旋转。 首先,我们有三个主要的文件:`index.html`是网页的结构文件,`...

    图片滚动+旋转代码

    而图片旋转则是指图片绕着某个轴心进行转动,同样可以使用CSS3的`rotate()`函数实现。例如,要让图片每秒旋转360度,可以这样写: ```css .image { animation: rotate 2s linear infinite; } @keyframes rotate {...

    js鼠标拖动图片360度平面旋转代码

    在JavaScript(简称JS)编程中,实现鼠标拖动图片360度平面旋转的效果涉及...通过结合这些技术,可以创建出一个流畅且互动性强的图片旋转效果。在实际项目中,可能还需要考虑兼容性、性能优化和用户体验等方面的细节。

    商品循环旋转广告代码js+css

    总的来说,"商品循环旋转广告代码js+css"是一个结合了前端核心技术的实践案例,它展示了如何通过JavaScript和CSS来创建一个交互式的商品广告展示模块。开发者可以通过理解和学习这样的代码,提升自己的前端开发技能...

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

    - `js`目录:包含JavaScript脚本,其中的核心代码应该是实现旋转特效的逻辑。 在实现360度旋转时,JavaScript通常会将原始图片拆分为多个切片,每个切片对应图片的一部分,然后根据旋转角度动态显示对应的切片,...

    js css3图片切换立体旋转代码.zip

    js css3图片切换立体旋转代码

    页面加载 带旋转特效的js代码

    页面加载时的旋转特效是网页动态效果的一种常见应用,它能为用户带来更...通过以上步骤,你就能创建一个基本的页面加载带旋转特效的JavaScript代码。实践中,可以根据具体需求进行调整和优化,以满足不同场景的应用。

Global site tag (gtag.js) - Google Analytics