立体感图片旋转js

合集下载

JS图片屏幕旋转特效代码

JS图片旋转特效代码JS图片旋转代码，像屏幕一样围成柱体圆形的图片旋转特效，图片的高度和宽度可自设，图片路径也可自定义，还有旋转速度也可以自定义调节。

<body onLoad="Carousel()"><script type="text/javascript">var Car_Image_Width=320;var Car_Image_Height=275;var Car_Border=true;var Car_Border_Color="white";var Car_Speed=4;var Car_Direction=true;var Car_NoOfSides=8;Car_Image_Sources=new Array("/jscss/demoimg/wall_s2.jpg","","/jscss/demoimg/wall_s3.jpg","","/jscss/demoimg/wall_s4.jpg","", //this slide isn't linked"/jscss/demoimg/wall_s7.jpg","" // NOTE No comma after last line);CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);C_Coef=new Array(3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;C_Pre_Img=new Array(Car_Image_Sources.length);varC_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_T otalW,C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;function Carousel(){if(document.getElementById){for(i=0;i<Car_Image_Sources.length;i+=2){C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]} C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;Car_Div=document.getElementById("Carousel");for(i=0;i<C_HalfNo;i++){CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);CW_I[i].style.position="absolute";CW_I[i].style.top=0+"px";CW_I[i].style.height=Car_Image_Height+"px";if(Car_Border){CW_I[i].style.borderStyle="solid";CW_I[i].style.borderWidth=1+"px";CW_I[i].style.borderColor=Car_Border_Color}CW_I[i].src=Car_Image_Sources[2*i];CW_I[i].lnk=Car_Image_Sources[2*i+1];CW_I[i].onclick=C_LdLnk;CW_I[i].onmouseover=C_Stp;CW_I[i].onmouseout=C_Rstrt}CarImages()}}function CarImages(){if(!C_Stppd){C_TotalW=0;for(i=0;i<C_HalfNo;i++){C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_ Width);C_TotalW+=C_ClcW[i]}C_LeftOffset=(C_MaxW-C_TotalW)/2;for(i=0;i<C_HalfNo;i++){CW_I[i].style.left=C_LeftOffset+"px";CW_I[i].style.width=C_ClcW[i]+"px";C_LeftOffset+=C_ClcW[i]}C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){ if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;if(Car_Direction){CW_I[C_HalfNo]=CW_I[0];for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];CW_I[0]=CW_I[C_HalfNo];CW_I[0].src=Car_Image_Sources[C_CrImg];CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}} setTimeout("CarImages()",50)}function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}function C_Rstrt(){C_Stppd=false}</script>吕延良博客整理发布，更多的网站特效和广大站长分享讨论！<div id="Carousel" style="position:relative"></div>。

JavaScript动画实例：转呀转

JavaScript动画实例：转呀转在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法：void rotate(in float angle); // 按给定的弧度顺时针旋转anglerotate（）方法旋转的中心始终是canvas的原点。

如果要改变旋转中心，需要使用translate 方法。

我们可以将绘制的图形每隔一定的时间间隔后，旋转一定的角度重新绘制一次，这样就可以得到旋转的动画效果。

1．旋转的扇叶将一个梯形按顺时针旋转90°的方式绘制4次，可以绘制出一个扇叶图案。

将绘制的扇叶图案每隔0.1秒后顺时针旋转12°，重新绘制一遍，得到旋转的扇叶动画。

编写如下的HTML代码。

<!DOCTYPE html><head><title>旋转的扇叶</title><script type="text/javascript">var context;var i;function draw(id){var canvas = document.getElementById(id);if (canvas == null)return false;context = canvas.getContext('2d');i=3;setInterval(move,100);}function move(){context.clearRect(0,0,400,300);context.save();context.fillStyle = 'green';context.translate(100,100);context.rotate(i*Math.PI/45)drawLeaf();i+=3;if (i>=90) i=3;context.restore();}function drawLeaf() // 绘制扇叶{context.save();for (var j=0;j<4;j++){context.rotate(Math.PI/2);context.beginPath();context.moveTo(-20,-80);context.lineTo(0,-80);context.lineTo(0,0);context.lineTo(-30,0);context.closePath();context.fill();}context.restore();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="200" height="200" style="border:3px double #996633;"> </canvas></body></html>将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML 代码的html文件，可以在浏览器窗口中看到扇叶的旋转动画，如图1所示。

js实现图片旋转的三种方法

js实现图⽚旋转的三种⽅法1 使⽤jQueryRotate.js实现⽰例代码：复制代码代码如下:<!DOCTYPE html><html><head><title></title><style type="text/css">#div1 {width: 800px;height: 600px;background-color: #ff0;position: absolute;}.imgRotate {width: 100px;height: 80px;position: absolute;top: 50%;left: 50%;margin: -40px 0 0 -50px;}</style></head><body><div id="div1"><img id="img1" class="imgRotate" src="/img/logo-yy.gif" /><input id="input2" type="button" value="btn2"></input></div></body><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="jQueryRotate.js"></script><script type="text/javascript">var num = 0;$("#input2").click(function(){num ++;$("#img1").rotate(90*num);});</script></html>测试结果：chrome下效果正常，旋转后img对象仍为img对象；ie8下效果正常，但旋转后img对象变为下⾯对象，由于对象变化，若旋转后仍按原来⽅法获取img对象，则会报js错误。

解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

解惑：如何使⽤html+css+js实现旋转相册，⽴⽅体相册等动画效果解惑：如何使⽤html+css+js实现旋转相册，⽴⽅体相册等动画效果⼀、前⾔最初还是在抖⾳上看到可以使⽤简单地代码实现炫酷的⽹页效果的，但是想要找到可以运⾏的代码还是⽐较困难的，最近突然想起就在⽹上汇总了⼀些这样的代码。

⼆、3D效果代码2.1、旋转相册<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>旋转相册</title><style type="text/css">body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{margin:0;padding:0;}body{background: black;}.content{width: 200px;height: 150px;position: relative;margin:200px auto 0;perspective: 1500px;}.box{width: 200px;height: 150px;transform-style: preserve-3d;transform:rotateX(-30deg);animation:photo 15s linear infinite;}.box:hover{animation:photo 15s linear infinite paused;}.box img{width: 200px;height: 150px;position: absolute;left: 0;top: 0;transform-style: preserve-3d;transition: all 1s;}.box img:nth-child(1){transform:translateZ(280px);}.box img:nth-child(2){transform:rotateY(40deg) translateZ(280px);}.box img:nth-child(3){transform:rotateY(80deg) translateZ(280px);}.box img:nth-child(4){transform:rotateY(120deg) translateZ(280px);}.box img:nth-child(5){transform:rotateY(160deg) translateZ(280px);}.box img:nth-child(6){transform:rotateY(200deg) translateZ(280px);}.box img:nth-child(7){transform:rotateY(240deg) translateZ(280px);}.box img:nth-child(8){transform:rotateY(280deg) translateZ(280px);}.box img:nth-child(9){transform:rotateY(320deg) translateZ(280px);}.box img:nth-child(1):hover{transform:translateZ(280px) scale(1.2);}.box img:nth-child(2):hover{transform:rotateY(40deg) translateZ(280px) scale(1.2); }.box img:nth-child(3):hover{transform:rotateY(80deg) translateZ(280px) scale(1.2); }.box img:nth-child(4):hover{transform:rotateY(120deg) translateZ(280px) scale(1.2); }.box img:nth-child(5):hover{transform:rotateY(160deg) translateZ(280px) scale(1.2); }.box img:nth-child(6):hover{transform:rotateY(200deg) translateZ(280px) scale(1.2); }.box img:nth-child(7):hover{transform:rotateY(240deg) translateZ(280px) scale(1.2); }.box img:nth-child(8):hover{transform:rotateY(280deg) translateZ(280px) scale(1.2); }.box img:nth-child(9):hover{transform:rotateY(320deg) translateZ(280px) scale(1.2); }@keyframes photo{0%{transform:rotateX(-30deg) rotateY(0deg);}100%{transform:rotateX(-30deg) rotateY(360deg);}}</style></head><body><div class="content"><div class="box"><img src="images/1.png" alt=""/><img src="images/2.png" alt=""/><img src="images/3.png" alt=""/><img src="images/4.png" alt=""/><img src="images/5.png" alt=""/><img src="images/6.png" alt=""/><img src="images/7.png" alt=""/><img src="images/8.png" alt=""/><img src="images/9.png" alt=""/></div></div></body></html>2.2、旋转魔⽅<!DOCTYPE html><html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1"> <style>ul{list-style-type: none;margin: 0;padding: 0;}.box{width: 300px;height: 300px;margin: 150px auto;position: relative;font-size: 50px;transform-style: preserve-3d;/*动画效果*/animation: rotate 10s linear infinite;}.box>div{width: 300px;height: 300px;position: absolute;}li{float: left;width: 90px;height: 90px;margin: 5px;border-radius: 20px;line-height: 90px;text-align: center;}.dv1 li{background-color: orange;transform: skewZ(60deg);}.dv1{background-color: transparent;transform: rotateY(90deg) translateZ(150px);}.dv2{background-color: transparent;transform: rotateY(-90deg) translateZ(150px);}.dv3{background-color: transparent;transform: rotateX(90deg) translateZ(150px);}.dv4{background-color: transparent;transform: rotateX(-90deg) translateZ(150px);}.dv5{background-color: transparent;transform:translateZ(150px);}.dv6{background-color: transparent;transform:translateZ(-150px);}.dv2 li{background-color: green;}.dv3 li{background-color: greenyellow;}.dv4 li{background-color: palevioletred;}.dv5 li{background-color: pink;}.dv6 li{background-color: yellow;}@keyframes rotate{0%{transform: rotateY(0deg) rotateX(0deg);}100%{transform: rotateY(135deg) rotateX(45deg); }}</style></head><body><div class="box"><div class="dv1"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv2"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv3"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv4"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv5"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv6"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div></div></body></html>2.3 旋转⽴⽅体相册<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><link type="text/css" href="./css/3.css" rel="stylesheet "> <title>旋转⽴⽅体相册</title></head><body><div id="react"><div class="out_front"><img src="./images/1.png" class="out_pic"></div><div class="out_back"><img src="./images/2.png" class="out_pic"></div><div class="out_left"><img src="./images/3.png" class="out_pic"></div><div class="out_right"><img src="./images/4.png" class="out_pic"></div><div class="out_top"><img src="./images/5.png" class="out_pic"></div><div class="out_bottom"><img src="./images/6.png" class="out_pic"></div><span class="in_front"><img src="./images/7.png" class="in_pic"></span><span class="in_back"><img src="./images/8.png" class="in_pic"></span><span class="in_left"><img src="./images/9.png" class="in_pic"></span><span class="in_right"><img src="./images/10.png" class="in_pic"></span><span class="in_top"><img src="./images/11.png" class="in_pic"></span><span class="in_bottom"><img src="./images/12.png" class="in_pic"></span></div></body></html>3.css⽂件：<pre name="code" class="css">*{padding:0;margin:0;}body{width:100%;height:100%;background:linear-gradient(darkred 0%,black 100%); }#react{width: 200px;height:200px;margin: 200px auto;transform-style:preserve-3d;animation:rotate 20s infinite;animation-timing-function: linear;}#react div{position:absolute;transition: all .4s;}div .out_pic{width:200px;height:200px;opacity:0.9;}div .in_pic{width:100px;height:100px;}#react span{display:block;position:absolute;width:100px;height:100px;top:50px;left:50px;}@keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}}.out_front{transform:translateZ(100px);}.out_back{transform:translateZ(-100px);}.out_left{transform:rotateY(90deg) translateZ(100px);}.out_right{transform: rotateY(-90deg) translateZ(100px);}.out_top{transform:rotateX(90deg) translateZ(100px);}.out_bottom{transform: rotateX(-90deg) translateZ(100px);}.in_front{transform:translateZ(50px);}.in_back{transform:translateZ(-50px);}.in_left{transform:rotateY(90deg) translateZ(50px);}.in_right{transform: rotateY(-90deg) translateZ(50px);}.in_top{transform:rotateX(90deg) translateZ(50px);}.in_bottom{transform: rotateX(-90deg) translateZ(50px);}/*外⾯的图⽚散开*/#react:hover .out_front{transform:translateZ(200px);}#react:hover .out_back{transform:translateZ(-200px);}#react:hover .out_left{transform:rotateY(90deg) translateZ(200px); }#react:hover .out_right{transform: rotateY(-90deg) translateZ(200px); }#react:hover .out_top{transform:rotateX(90deg) translateZ(200px); }#react:hover .out_bottom{transform: rotateX(-90deg) translateZ(200px); }/*⾥⾯的图⽚散开*/#react:hover .in_front{transform:translateZ(100px);}#react:hover .in_back{transform:translateZ(-100px);}#react:hover .in_left{transform:rotateY(90deg) translateZ(100px); }#react:hover .in_right{transform: rotateY(-90deg) translateZ(100px); }#react:hover .in_top{transform:rotateX(90deg) translateZ(100px); }#react:hover .in_bottom{transform: rotateX(-90deg) translateZ(100px); }@charset "utf-8";/* CSS Document */2.4 动态魔⽅<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CSS3 魔⽅</title><style>.wrap {transform-style: preserve-3d;width: 300px; height: 300px;position: relative; /* 定位起点元素 */border-top:solid 1px gray; /* x 轴 */border-left:solid 1px gray; /* y 轴 *//* 倾斜⼀点⽅能见⽴体效果 */transform: rotateX(-30deg) rotateY(-30deg); }/* z 轴正⽅向 */.zaxis_p {position:absolute;width : 300px;height:1px;border-top:solid 1px gray;/* xy⾯上，90度⽴起来就是 z */transform: rotateY(-90deg);/* ⽴起来的旋转点 */transform-origin:0 0 0;}/* z 轴负⽅向 */.zaxis_n {position:absolute;width : 300px;height:1px;border-top:dashed 1px gray; /*（虚线）*/transform: rotateY(90deg);transform-origin:0 0 0;}.block {position: absolute;margin: 0 auto;border:solid 2px black;border-radius:3px;/* 宽⾼包含边框 */box-sizing:border-box;transform-origin:0 0 0;}.cube {position: absolute;/* ⼦元素版⾯是需要三维空间的 */transform-style: preserve-3d;}.magicBox {position: absolute;transform-style: preserve-3d;}</style><script>/** 版⾯ block 类* direct ⽅向* color 颜⾊* size 边长⼤⼩**/function Block(direct, color, size){this.direct = direct;this.color = color;this.size = size;// 绘制过的 UI 元素对象this.Element = null;// 在⽗容器中绘制this.DrawIn = function(cubeElement){var e = this.Element || document.createElement('div');e.style.width = this.size + "px";e.style.height = this.size + "px";var top = (this.direct == 'down' ? this.size : 0);var left = (this.direct == 'right' ? this.size : 0);e.style.top = top + "px";e.style.left = left + "px";e.style.backgroundColor = this.color;var rx = (this.direct == 'up' || this.direct == 'down' ? -90 : 0);var ry = (this.direct == 'left' || this.direct == 'right' ? 90 : 0);;var tz = (this.direct == 'back' ? this.size : 0);e.style["transform"] = "rotateX(" + rx + "deg) rotateY(" + ry + "deg) translateZ(-" + tz + "px)";e.className = "block";this.Element = e;cubeElement.appendChild(e);};}/** 魔⽅格 Cube 类* blockSize 为魔⽅格的边长代表⼤⼩* directColorArray 为指定⽅向与颜⾊的数组* 形式为 [direct,color,direct,color,...]* x,y,z 为在魔⽅中的坐标，未指定时默认为0,0,0**/function Cube(blockSize, directColorArray, x, y, z){this.x = x | 0;this.y = y | 0;this.z = z | 0;this.blockSize = blockSize;this.blocks = [];/* 根据参数建⽴ Block 对象 */for(var i=0; i < directColorArray.length / 2; i++){this.blocks.push(new Block(directColorArray[ i*2 ], directColorArray[ i*2 + 1 ], this.blockSize)); }// 绘制过的 UI 元素对象this.Element = null;// 在⽗容器中绘制this.DrawIn = function(boxElement, x, y, z){this.x = x | this.x;this.y = y | this.y;this.z = z | this.z;var e = this.Element || document.createElement('div');e.style.width = this.blockSize + "px";e.style.height = this.blockSize + "px";e.style["transform"] = this.FormatTransform();e.className = "cube";for(var i=0; i < this.blocks.length; i++) {this.blocks[i].DrawIn(e);}this.Element = e;boxElement.appendChild(e);};this.Rotate = function(axis, turn, dimension){if(!this.Element) return;// 重绘魔⽅格this.ReDrawBlocks(axis, turn);// 转换坐标this.TransCoordinate(axis, turn, dimension);// 先停⽌动画效果，逆向 90 度，此时外观跟旋转前⼀致this.Element.style["transition"] = "";var rotateDegs = new Object();rotateDegs[axis] = (turn == 'left' ? -90 : 90);this.Element.style["transform"] = this.FormatTransform(rotateDegs);// 旋转原点旋转的层都需要以魔⽅的中⼼点旋转// 旋转原点是以元素⾃⾝来计算的，因所有魔⽅格都是从(0,0,0)平衡的，因此计算结果都⼀样 var centerX = this.blockSize * dimension / 2;var centerY = this.blockSize * dimension / 2;var centerZ = -this.blockSize * dimension / 2;this.Element.style["transformOrigin"] = centerX + "px " + centerY + "px " + centerZ + "px";// 这样才能触发动画setTimeout(function(obj){return function(){obj.Element.style["transform"] = obj.FormatTransform();obj.Element.style["transition"] = "transform 0.5s"; // 0.3 秒};}(this), 1);}/** 坐标转换* axis 轴向* turn 转向* dimension 阶数**/this.TransCoordinate = function(axis, turn, dimension){if(axis == 'x'){if( turn == 'left' ){var oriy = this.y;this.y = this.z;this.z = dimension - 1 - oriy;} else {var oriz = this.z;this.z = this.y;this.y = dimension - 1 - oriz;}} else if(axis == 'y'){if( turn == 'right' ){var orix = this.x;this.x = this.z;this.z = dimension - 1 - orix;} else {var oriz = this.z;this.z = this.x;this.x = dimension - 1 - oriz;}} else if(axis == 'z'){if( turn == 'right' ){var orix = this.x;this.x = this.y;this.y = dimension - 1 - orix;} else {var oriy = this.y;this.y = this.x;this.x = dimension - 1 - oriy;}}}/** 将各 block 调整位置，重绘魔⽅格* axis 轴向* turn 转向**/this.ReDrawBlocks = function(axis, turn){var xyzDirects = [];xyzDirects['x'] = ["front", "up", "back", "down"];xyzDirects['y'] = ["front", "right", "back", "left"];xyzDirects['z'] = ["up", "right", "down", "left"];var curDirects = xyzDirects[axis];for(var i=0; i < this.blocks.length; i++) {var index = curDirects.indexOf( this.blocks[i].direct );if(index > -1){var newIndex = turn == 'left' ? (index + 1) % 4 : (index + 4 - 1) % 4;this.blocks[i].direct = curDirects[newIndex];this.blocks[i].DrawIn(this.Element);}}}// 格式仳 transform 属性// css3 把旋转与平移混⼀起（真不好⽤）this.FormatTransform = function (rotateDegs){var rotatePart = "rotateX(0deg) rotateY(0deg) rotateZ(0deg)";if(rotateDegs){rotatePart = "rotateX(" + (rotateDegs.x | 0) + "deg) rotateY(" + (rotateDegs.y | 0) + "deg) rotateZ(" + (rotateDegs.z | 0) + "deg)";}return rotatePart + " translate3d(" + (this.x * this.blockSize) + "px," + (this.y * this.blockSize) + "px,-" + (this.z * this.blockSize) + "px) "; }}/** 魔⽅ MagicBox 类* dimension 阶数* blockSize 每⼩格⼤⼩**/function MagicBox(dimension, blockSize){this.dimension = dimension;this.blockSize = blockSize;this.cubes = [];this.MakeDefaultCubes = function(){this.cubes = [];for(var x=0; x < this.dimension; x++){for(var y=0; y < this.dimension; y++){for(var z=0; z < this.dimension; z++){var cube = this.MakeDefaultCube(x, y, z);if(cube){this.cubes.push(cube);}}}}};/* 根据魔⽅格在阶数中的位置⽣成魔⽅格，魔⽅内部的格⼦忽略 */this.MakeDefaultCube = function(x, y, z){var max = this.dimension - 1;var dc = [];if(x == 0) dc.push("left", "orange"); else if(x == max) dc.push("right", "red");if(y == 0) dc.push("up", "yellow"); else if(y == max) dc.push("down", "white");if(z == 0) dc.push("front", "blue"); else if(z == max) dc.push("back", "green");if(dc.length == 0) return null;var cube = new Cube(this.blockSize, dc, x, y, z);return cube;}// 构造时⾃动产⽣初始魔⽅格this.MakeDefaultCubes();// 绘制过的 UI 元素对象this.Element = null;// 在⽗容器中绘制this.DrawIn = function(domElement){var e = this.Element || document.createElement('div');e.style.width = (this.dimension * this.blockSize) + "px";e.style.height = (this.dimension * this.blockSize) + "px";e.className = "magicBox";for(var i=0; i < this.cubes.length; i++) {this.cubes[i].DrawIn(e);}this.Element = e;domElement.appendChild(e);};/** MagicBox.Rotate 旋转* axis 轴向* level 层* turn 转向**/this.Rotate = function(axis, level, turn){for(var i=0; i < this.cubes.length; i++) {if(this.cubes[i][axis] == level) { // 该轴该层的才旋转this.cubes[i].Rotate(axis, turn, this.dimension);}}};}function onload(){//* 魔⽅绘制⽰例var magicBox = new MagicBox(3, 50);magicBox.DrawIn( document.querySelector(".wrap") );var rotates = GenRotateActions(3, 5);for(var i=0; i<rotates.length; i++){setTimeout(function(magicBox, rotate){return function(){magicBox.Rotate(rotate.axis, rotate.level, rotate.turn);};}(magicBox, rotates[i]), 3000 + 800 * i);}for(var i=0; i<rotates.length; i++){setTimeout(function(magicBox, rotate){return function(){magicBox.Rotate(rotate.axis, rotate.level, (rotate.turn == 'left' ? 'right' : 'left')); };}(magicBox, rotates[rotates.length -1 - i]), 1000 + 8800 + 800 * i);}}/** 产⽣⼀个指定数量的旋转序列数组* dimension 魔⽅阶数* count 序列数量**/function GenRotateActions(dimension, count){var result = [];for(var i=0; i<count; i++){result[i] = {axis : ['x','y','z'][Math.floor(Math.random() * 3)],level : Math.floor(Math.random() * dimension),turn : ['left','right'][Math.floor(Math.random() * 2)]};}return result;}</script></head><body style="padding:300px;" onload="onload()"><div class="wrap"><div class="zaxis_p"></div><div class="zaxis_n"></div></div></body></html>2.5 ⼆⼗⾯体<html><head><title>⼆⼗⾯体</title><style type="text/css">html, body {height: 100%;margin: 0;background: rgba(0, 0, 0,1);}.sharp {animation: ani 4s linear infinite;}div {transform-style: preserve-3d;transform: translate(-50%, -50%) rotate3d(0, 1, 0, 72deg);position: absolute;left: 50%;top: 50%;}span { /*利⽤边框做⼀个三⾓形*/border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;/*每个span下⽅设置颜⾊，其余边透明*/ border-width: 173.2px 100px;border-style: solid;width: 0;height: 0;position: absolute;left: 50%;margin-left: -100px;top: 50%;margin-top: -346.4px;}span:before { /*利⽤边框在span中做⼀个三⾓形，实现嵌套，让span变成边框,span:before变成要显⽰的东西*/ content: '';border-color: transparent transparent rgba(0, 123, 123, 0.5) transparent;/*设置每⾯的颜⾊*/border-width: 165.2px 92px;border-style: solid;width: 0;height: 0;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);margin-top: 4px;}div span:nth-child(1) {transform: rotate3d(0, 1, 0, 72deg) rotate3d(1, 0, 0, 51.5deg);}div span:nth-child(2) {transform: rotate3d(0, 1, 0, 144deg) rotate3d(1, 0, 0, 51.5deg);}div span:nth-child(3) {transform: rotate3d(0, 1, 0, 216deg) rotate3d(1, 0, 0, 51.5deg);}div span:nth-child(4) {transform: rotate3d(0, 1, 0, 288deg) rotate3d(1, 0, 0, 51.5deg);}div span:nth-child(5) {transform: rotate3d(0, 1, 0, 360deg) rotate3d(1, 0, 0, 51.5deg);}.sharp div:nth-child(1) {transform: translateY(51px) rotateY(108deg) rotateX(116deg) translateZ(31px); }.sharp div:nth-child(2) {transform: translateY(51px) rotateY(180deg) rotateX(116deg) translateZ(31px); }.sharp div:nth-child(3) {transform: translateY(51px) rotateY(252deg) rotateX(116deg) translateZ(31px); }.sharp div:nth-child(4) {transform: translateY(51px) rotateY(324deg) rotateX(116deg) translateZ(31px); }.sharp div:nth-child(5) {transform: translateY(51px) rotateY(396deg) rotateX(116deg) translateZ(31px); }@keyframes ani {100% {transform: rotateY(360deg);}}</style></head><body><div class="sharp"><div><span></span><span></span><span></span><span></span><span></span></div><div><span></span><span></span><span></span><span></span><span></span></div><div><span></span><span></span><span></span><span></span><span></span></div><div><span></span><span></span><span></span><span></span><span></span></div><div><span></span><span></span><span></span><span></span><span></span></div><div><span></span><span></span><span></span><span></span><span></span></div></div></body></html>2.6 3D相册拖拽动画<!DOCTYPE HTML><html onselectstart='return false'><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta name="keywords" content="" /><meta name="description" content="" /><title>3D相册拖拽动画</title><style type="text/css">*{ margin:0; padding:0;}body{ background:#000; width:100%; height:100%; overflow:hidden}#wrap{ width:133px; height:200px; margin:25% auto 0;position:relative;top:-100px;transform-style:preserve-3d;transform:perspective(800px) rotateX(-10deg) rotateY(0deg);}#wrap ul li{list-style:none;width:120px;height:120px;position:absolute;top:0;left:0;border-radius:3px;box-shadow:0 0 10px #fff;background-size:100%;transform:rotateY(0deg) translateZ(0px);-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%); }#wrap p{ width:1200px; height:1200px; position:absolute; border-radius:100%;left:50%; top:100%; margin-left:-600px; margin-top:-600px;background:-webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));transform:rotateX(90deg);}</style></head><body><div id="wrap"><ul><li style="background-image:url(images/1.png);"></li><li style="background-image:url(images/2.png);"></li><li style="background-image:url(images/3.png);"></li><li style="background-image:url(images/4.png);"></li><li style="background-image:url(images/5.png);"></li><li style="background-image:url(images/6.png);"></li><li style="background-image:url(images/7.png);"></li><li style="background-image:url(images/8.png);"></li><li style="background-image:url(images/9.png);"></li><li style="background-image:url(images/10.png);"></li><li style="background-image:url(images/11.png);"></li></ul><p></p></div><script src="./js/jquery-1.8.3.js"></script><script>$(function(){var oL = $('#wrap ul li').size();var Deg = 360/oL;var xDeg = 0,yDeg = -10,xs,ys,p=null;for (var i=oL-1;i>=0;i--){$('#wrap ul li').eq(i).css({transition:"1s "+(oL-i)*0.15+"s transform,.5s "+(1+oL*0.15)+"s opacity",。

JavaScript图形实例：图形的旋转变换

JavaScript图形实例：图形的旋转变换旋转变换：图形上的各点绕一固定点沿圆周路径作转动称为旋转变换。

可用旋转角表示旋转量的大小。

旋转变换通常约定以逆时针方向为正方向。

最简单的旋转变换是以坐标原点(0,0)为旋转中心，这时，平面上一点P(x,y) 旋转了θ之后，变成点P’(x,y) ，如图1所示。

由三角关系可得：图1 点P逆时针旋转平面上一点P(x,y)若按顺时针方向旋转了θ之后，变成点P’(x,y) ，如图2所示。

图2 点P顺时针旋转由三角关系可得：1．三角形旋转先绘制一个三角形，然后将该三角形依次顺时针旋转45°，90°，135°，180°，225°，270°，315°，可以绘制出一个三角形旋转图案。

编写如下的HTML代码。

<!DOCTYPE html><head><title>三角形旋转</title><script type="text/javascript">function draw(id){var canvas=document.getElementById(id);if (canvas==null)return false;var context=canvas.getContext('2d');context.fillStyle="#EEEEDD";context.fillRect(0,0,300,300);context.strokeStyle="red";context.lineWidth=1;context.fillStyle="yellow";context.beginPath();px1=150; py1=150;px2=250; py2=150;px3=200; py3=120;context.moveTo(px1,py1);context.lineTo(px2,py2);context.lineTo(px3,py3);context.lineTo(px1,py1);x0=150; y0=150; // 旋转中心a=Math.PI/4; // 旋转角度for (i=1;i<=7;i++){tx=px1; px1=x0+(px1-x0)*Math.cos(a)+(py1-y0)*Math.sin(a);py1=y0-(tx-x0)*Math.sin(a)+(py1-y0)*Math.cos(a);tx=px2; px2=x0+(px2-x0)*Math.cos(a)+(py2-y0)*Math.sin(a);py2=y0-(tx-x0)*Math.sin(a)+(py2-y0)*Math.cos(a);tx=px3; px3=x0+(px3-x0)*Math.cos(a)+(py3-y0)*Math.sin(a);py3=y0-(tx-x0)*Math.sin(a)+(py3-y0)*Math.cos(a);context.moveTo(px1,py1);context.lineTo(px2,py2);context.lineTo(px3,py3);context.lineTo(px1,py1);}context.closePath();context.stroke();context.fill();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="300" height="300">您的浏览器不支持canvas！</canvas></body></html>将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML 代码的html文件，可以看到在浏览器窗口中绘制出三角形旋转图案，如图1所示。

js实现3D粒子酷炫动态旋转特效

js实现3D粒⼦酷炫动态旋转特效js实现3D粒⼦酷炫动态旋转特效（效果⽐较酷炫，中途不仅有形态的变换，还有颜⾊的变化，希望⼤家能够喜欢）代码实现过程中的静态截图<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""><style>html,body{margin:0px;width:100%;height:100%;overflow:hidden;background:#000;}#canvas{position:absolute;height:100%;}</style></HEAD><BODY><canvas id="canvas"></canvas><script>function project3D(x,y,z,vars){var p,d;x-=vars.camX;y-=vars.camY-8;z-=vars.camZ;p=Math.atan2(x,z);d=Math.sqrt(x*x+z*z);x=Math.sin(p-vars.yaw)*d;z=Math.cos(p-vars.yaw)*d;p=Math.atan2(y,z);d=Math.sqrt(y*y+z*z);y=Math.sin(p-vars.pitch)*d;z=Math.cos(p-vars.pitch)*d;var rx1=-1000;var ry1=1;var rx2=1000;var ry2=1;var rx3=0;var ry3=0;var rx4=x;var ry4=z;var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;if(!z)z=0.000000001;if(ua>0&&ua<1&&ub>0&&ub<1){return {x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,y:vars.cy+y/z*vars.scale,d:(x*x+y*y+z*z)};}else{return { d:-1 };}}function elevation(x,y,z){var dist = Math.sqrt(x*x+y*y+z*z);if(dist && z/dist>=-1 && z/dist <=1) return Math.acos(z / dist);return 0.00000001;}function rgb(col){col += 0.000001;var r = parseInt((0.5+Math.sin(col)*0.5)*16);var g = parseInt((0.5+Math.cos(col)*0.5)*16);var b = parseInt((0.5-Math.sin(col)*0.5)*16);return "#"+r.toString(16)+g.toString(16)+b.toString(16);}function interpolateColors(RGB1,RGB2,degree){var w2=degree;var w1=1-w2;return [w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]]; }function rgbArray(col){col += 0.000001;var r = parseInt((0.5+Math.sin(col)*0.5)*256);var g = parseInt((0.5+Math.cos(col)*0.5)*256);var b = parseInt((0.5-Math.sin(col)*0.5)*256);return [r, g, b];}function colorString(arr){var r = parseInt(arr[0]);var g = parseInt(arr[1]);var b = parseInt(arr[2]);return "#"+("0" + r.toString(16) ).slice (-2)+("0" + g.toString(16) ).slice (-2)+("0" + b.toString(16) ).slice (-2);}function process(vars){if(vars.points.length<vars.initParticles) for(var i=0;i<5;++i) spawnParticle(vars);var p,d,t;p = Math.atan2(vars.camX, vars.camZ);d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ);d -= Math.sin(vars.frameNo / 80) / 25;t = Math.cos(vars.frameNo / 300) / 165;vars.camX = Math.sin(p + t) * d;vars.camZ = Math.cos(p + t) * d;vars.camY = -Math.sin(vars.frameNo / 220) * 15;vars.yaw = Math.PI + p + t;vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;var t;for(var i=0;i<vars.points.length;++i){x=vars.points[i].x;y=vars.points[i].y;z=vars.points[i].z;d=Math.sqrt(x*x+z*z)/1.0075;t=.1/(1+d*d/5);p=Math.atan2(x,z)+t;vars.points[i].x=Math.sin(p)*d;vars.points[i].z=Math.cos(p)*d;vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2);if(vars.points[i].y>vars.vortexHeight/2 || d<.25){vars.points.splice(i,1);spawnParticle(vars);}}}function drawFloor(vars){var x,y,z,d,point,a;for (var i = -25; i <= 25; i += 1) {for (var j = -25; j <= 25; j += 1) {x = i*2;z = j*2;y = vars.floor;d = Math.sqrt(x * x + z * z);point = project3D(x, y-d*d/85, z, vars);if (point.d != -1) {size = 1 + 15000 / (1 + point.d);a = 0.15 - Math.pow(d / 50, 4) * 0.15;if (a > 0) {vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2)); vars.ctx.globalAlpha = a;vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);}}}}vars.ctx.fillStyle = "#82f";for (var i = -25; i <= 25; i += 1) {for (var j = -25; j <= 25; j += 1) {x = i*2;z = j*2;y = -vars.floor;d = Math.sqrt(x * x + z * z);point = project3D(x, y+d*d/85, z, vars);if (point.d != -1) {size = 1 + 15000 / (1 + point.d);a = 0.15 - Math.pow(d / 50, 4) * 0.15;if (a > 0) {vars.ctx.fillStyle = colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2)); vars.ctx.globalAlpha = a;vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size);}}}}function sortFunction(a,b){return b.dist-a.dist;}function draw(vars){vars.ctx.globalAlpha=.15;vars.ctx.fillStyle="#000";vars.ctx.fillRect(0, 0, canvas.width, canvas.height);drawFloor(vars);var point,x,y,z,a;for(var i=0;i<vars.points.length;++i){x=vars.points[i].x;y=vars.points[i].y;z=vars.points[i].z;point=project3D(x,y,z,vars);if(point.d != -1){vars.points[i].dist=point.d;size=1+vars.points[i].radius/(1+point.d);d=Math.abs(vars.points[i].y);a = .8 - Math.pow(d / (vars.vortexHeight/2), 1000) * .8;vars.ctx.globalAlpha=a>=0&&a<=1?a:0;vars.ctx.fillStyle=rgb(vars.points[i].color);if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size); }}vars.points.sort(sortFunction);}function spawnParticle(vars){var p,ls;pt={};p=Math.PI*2*Math.random();ls=Math.sqrt(Math.random()*vars.distributionRadius);pt.x=Math.sin(p)*ls;pt.y=-vars.vortexHeight/2;pt.vy=vars.initV/20+Math.random()*vars.initV;pt.z=Math.cos(p)*ls;pt.radius=200+800*Math.random();pt.color=pt.radius/1000+vars.frameNo/250;vars.points.push(pt);}function frame(vars) {if(vars === undefined){var vars={};vars.canvas = document.querySelector("canvas");vars.ctx = vars.canvas.getContext("2d");vars.canvas.width = document.body.clientWidth;vars.canvas.height = document.body.clientHeight;window.addEventListener("resize", function(){vars.canvas.width = document.body.clientWidth;vars.canvas.height = document.body.clientHeight;vars.cx=vars.canvas.width/2;vars.cy=vars.canvas.height/2;}, true);vars.frameNo=0;vars.camX = 0;vars.camY = 0;vars.camZ = -14;vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;vars.yaw = 0;vars.cx=vars.canvas.width/2;vars.cy=vars.canvas.height/2;vars.bounding=10;vars.scale=500;vars.floor=26.5;vars.points=[];vars.initParticles=2000;vars.initV=.01;vars.distributionRadius=800;vars.vortexHeight=25;vars.frameNo++;requestAnimationFrame(function() {frame(vars);});process(vars);draw(vars);}frame();</script></BODY></HTML>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

JavaScript图片旋转效果实现方法详解

JavaScript图⽚旋转效果实现⽅法详解在Canvas API中，上下⽂CanvasRenderingContext2D对象提供了⼀个与坐标旋转相关的⽅法：void rotate(in float angle); // 按给定的弧度顺时针旋转anglerotate（）⽅法旋转的中⼼始终是canvas的原点。

如果要改变旋转中⼼，需要使⽤translate⽅法。

我们可以将绘制的图形每隔⼀定的时间间隔后，旋转⼀定的⾓度重新绘制⼀次，这样就可以得到旋转的动画效果。

1．旋转的扇叶将⼀个梯形按顺时针旋转90°的⽅式绘制4次，可以绘制出⼀个扇叶图案。

将绘制的扇叶图案每隔0.1秒后顺时针旋转12°，重新绘制⼀遍，得到旋转的扇叶动画。

编写如下的HTML代码。

<!DOCTYPE html><head><title>旋转的扇叶</title><script type="text/javascript">var context;var i;function draw(id){var canvas = document.getElementById(id);if (canvas == null)return false;context = canvas.getContext('2d');i = 3;setInterval(move, 100);}function move(){context.clearRect(0, 0, 400, 300);context.save();context.fillStyle = 'green';context.translate(100, 100);context.rotate(i * Math.PI / 45)drawLeaf();i += 3;if (i >= 90) i = 3;context.restore();}function drawLeaf() // 绘制扇叶{context.save();for (var j = 0; j < 4; j++){context.rotate(Math.PI / 2);context.beginPath();context.moveTo(-20, -80);context.lineTo(0, -80);context.lineTo(0, 0);context.lineTo(-30, 0);context.closePath();context.fill();}context.restore();}</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="200" height="200"style="border:3px double #996633;"></canvas></body></html>将上述HTML代码保存到⼀个html⽂本⽂件中，再在浏览器中打开包含这段HTML代码的html⽂件，可以在浏览器窗⼝中看到扇叶的旋转动画，如图1所⽰。

如何在JavaScript中实现图片的裁剪和旋转

如何在JavaScript中实现图片的裁剪和旋转在JavaScript中，可以使用HTML5的canvas元素和相应的API 来实现图片的裁剪和旋转。

下面将详细介绍如何使用canvas和JavaScript实现这两个功能。

1.图片裁剪图片裁剪是指将图片的一部分或者多个部分切下来，只保留需要的部分。

在JavaScript中，可以使用canvas的drawImage()方法来实现图片裁剪。

首先，我们需要创建一个canvas元素，并获取它的2D上下文，代码如下：```javascriptvar canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");```接下来，我们可以使用Image对象来加载图片，并在加载完成后绘制到canvas上。

代码如下：```javascriptvar image = new Image();image.onload = function() {//设置要裁剪的区域var sx = 100; //起始X坐标var sy = 100; //起始Y坐标var swidth = 200; //裁剪宽度var sheight = 200; //裁剪高度var dx = 0; //目标区域起始X坐标var dy = 0; //目标区域起始Y坐标var dwidth = 200; //目标区域宽度var dheight = 200; //目标区域高度//绘制裁剪后的图片到canvas上ctx.drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);};image.src = "image.jpg"; //替换为你自己的图片路径```上述代码中，我们首先创建了一个Image对象，并给其指定一个onload事件处理函数。

css3transform及原生js实现鼠标拖动3D立方体旋转

css3transform及原⽣js实现⿏标拖动3D⽴⽅体旋转本⽂通过原⽣JS，点击事件，⿏标按下、⿏标抬起和⿏标移动事件，实现3D⽴⽅体的拖动旋转，并将旋转⾓度实时的反应⾄界⾯上显⽰。

实现原理：通过获取⿏标点击屏幕时的坐标和⿏标移动时的坐标，来获得⿏标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。

从⽽通过改变transform：rotate属性值来达到3D⽴⽅体旋转的效果：HTML代码块：XML/HTML Code复制内容到剪贴板1. <body>2. <input type="button" class="open" value="点击散开"/>3. <input type="text" class="xNum" value="0"/>//X轴旋转⾓度4. <input type="text" class="yNum" value="0"/>//Y轴旋转⾓度5. <input type="text" class="zNum"/>6. <div class="big_box">7. <div class="box">8. <span>1</span>9. <span>2</span>10. <span>3</span>11. <span>4</span>12. <span>5</span>13. <span>6</span>14. </div>15. </div>16. </body>CSS代码块：CSS Code复制内容到剪贴板1. <style>2. body{cursor: url("img/openhand1.png"),auto;}3. .big_box{4. width: 500px;5. height: 500px;6. margin: 200px auto;7. }8.9. .box{10. -webkit-transform-style: preserve-3d;11. -moz-transform-style: preserve-3d;12. -ms-transform-style: preserve-3d;13. transform-style: preserve-3d;14. transform-origin:100px 100px 00px;15. position: relative;16. transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);17. }18. .box span{19. transition: all 1s linear;20.21. }22. span{23. display: block;24. position: absolute;25. width: 200px;26. height: 200px;27. box-sizing: border-box;28. border:1px solid #999;29. /*opacity: 0.7;*/30. text-align: center;31. line-height: 200px;32. font-size: 60px;33. font-weight: 700;34. border-radius: 12%;35.36. }37. .box span:nth-child(1){38. background-color: deepskyblue;39. transform-origin: left;40. transform: rotatey(-90deg) translatex(-100px);//左41. }42. .box span:nth-child(2){43. background-color: red;44. transform-origin: rightright;45. transform: rotatey(90deg) translatex(100px) ;//右46.47. }48.49. .box span:nth-child(3){50. background-color: green;51. transform-origin: top;52. transform: rotatex(90deg) translatey(-100px) ;//上53.54. }55. .box span:nth-child(4){56. background-color: #6633FF;57. transform-origin: bottombottom;58. transform: rotatex(-90deg) translatey(100px);//下59. }60. .box span:nth-child(5){61. background-color: gold;62. transform: translatez(-100px);//后63. }64. .box span:nth-child(6){65.66. background-color: #122b40;67. transform: translatez(100px);//前68. }69. .box:hover span{70.71. opacity: 0.3;72. }73. .box:hover{74. animation-play-state:paused;//设置动画暂停75. }76. </style>JS代码块：JavaScript Code复制内容到剪贴板1. <script>2. move();3.4. clickBox();5.6. //⿏标按下且移动时触发，7.8. function move(){9. var body = document.querySelector("body");10. var box = document.querySelector(".box");11. var xNum =document.querySelector(".xNum");12. var yNum =document.querySelector(".yNum");13. var x = 0,y = 0,z = 0;14. var xx = 0,yy = 0;15. var xArr = [],yArr = [];16. window.onmousedown = function (e) {//⿏标按下事件17. body.style.cursor = 'url("img/closedhand1.png"),auto';18. xArr[0] = e.clientX/2;//获取⿏标点击屏幕时的坐标19. yArr[0] = e.clientY/2;20. window.onmousemove = function (e) {//⿏标移动事件————当⿏标按下且移动时触发21. xArr[1] = e.clientX/2;//获取⿏标移动时第⼀个点的坐标22. yArr[1] = e.clientY/2;23. yy += xArr[1] - xArr[0];//获得⿏标移动的距离24. xx += yArr[1] - yArr[0];25. xNum.value = xx+"°";//将所获得距离数字赋值给input显⽰旋转⾓度26. yNum.value = yy+"°";27. //将旋转⾓度写⼊transform中28. box.style.transform = "rotatex("+xx+"deg) rotatey("+yy+"deg) rotatez(0deg)scale3d(0.7,0.7,0.7)";29. xArr[0] = e.clientX/2;30. yArr[0] = e.clientY/2;31. }32.33. };34. window.onmouseup = function () {//⿏标抬起事件————⽤于清除⿏标移动事件，35. body.style.cursor = 'url("img/openhand1.png"),auto';36. window.onmousemove = null;37. }38. }39. //点击事件、负责⽴⽅体盒⼦的六⾯伸展40. function clickBox(){41. var btn = document.querySelector(".open");42. var box = document.querySelector(".box");43. var son = box.children;44. var value = 0;45. //存储⽴⽅体散开时的transform参数46. var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",<br>"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];47. //存储⽴⽅体合并时的transform参数48. var arr1 = ["rotatey(-90deg) translatex(-100px)translatez(100px)","rotatey(90deg) translatex(100px)translatez(100px)",<br>"rotatex(90deg) translatey(-100px)translatez(100px)","rotatex(-90deg) translatey(100px)translatez(100px)","translatez(-200px)","translatez(200px)"];49. btn.onclick = function(){50. if(value == 0){51. value = 1;52. btn.value = "点击合并";53. for(var i=0;i<arr1.length;i++){54. son[i].style.transform = arr1[i];55. console.log(son[i])56. }57. }else if(value == 1){58. value = 0;59. btn.value = "点击散开";60. for(var j=0;j<arr0.length;j++){61. son[j].style.transform = arr0[j];62. console.log(j);63.64. }65. }66. };67. }68. </script>69.以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

原生JS实现旋转木马轮播图特效

原生JS实现旋转木马轮播图特效大概是这个样子：首先来简单布局一下（emm...随便弄一下吧，反正主要是用js来整的）1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7<title>旋转木马轮播图</title> 8<script src="js/index.js"></script> 9 <style>10 * {11 margin: 0;12 padding: 0;13}14 ul, li {15 list-style: none;16}17 .wrap {18margin:0 auto;19width: 1050px;20}21 .slider {22 position: relative;23 margin: 50px auto;24 height: 400px;25}26 .slider li {27 position: absolute;28}29 .slider li img {30 width: 100%;31}32 .slider .arrow-l,33 .slider .arrow-r{34 position: absolute;35 top: 0;36 display: none;37width:80px;38height:400px;39 background-size: 80px;40 cursor: pointer;41 opacity: 0.8;42 z-index: 99;43}44 .arrow-r {45 right: 80px;46background:url(img/next.png) no-repeat 0;47}48 .arrow-l {49 left: 80px;50 background: url(img/prev.png) no-repeat 0;51}52</style>53</head>54<body>55<div class="wrap">56<div class="slider">57<ul>58<li><img src="img/img1.jpg"alt=""></li>59<li><img src="img/img2.jpg"alt=""></li>60<li><img src="img/img3.jpg"alt=""></li>61<li><img src="img/img4.jpg"alt=""></li>62<li><img src="img/img5.jpg" alt=""></li>63</ul>64<div class="arrows">65<i class="arrow arrow-l"></i>66 <i class="arrow arrow-r"></i>67</div>68</div>69 </div>70</body>71</html>下边来进入主要部分其实主要就是动画函数的封装以及对数组的改变动画函数部分的注释，博主的上一篇博客有写：原生JS实现动画函数的封装。

JavaScript图片翻转，垂直和水平

JavaScript图片翻转，垂直和水平JavaScript垂直和水平翻转图片，翻转过程中你可以和原图进行比较，本实例仅水平和垂直翻转，暂不能指定旋转角度，仅供参考。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"""><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>JavaScript图片翻转效果</title></head><body><table width="433" border="2" align="center" cellpadding="3" cellspacing="4" bordercolor="#006699" bgcolor="#FFFFFF"><tr><td colspan="2"><div align="center"><font color="#FF0000" size="6">水平翻转</font></div></td> </tr><tr><td width="165"><font color="#FF9900" face="黑体" size="4">原图：</font></td><td width="252"><font color="#FF9900" face="黑体" size="4">水平翻转执行结果：</font></td></tr><tr><td><img src="/images/logo.gif" border="0"id="image1"></td><td><img src="/images/logo.gif" border="0" id="image11"></td></tr><tr><td colspan="2"><div align="center"><font color="#FF0000" size="6">垂直翻转</font></div></td> </tr><tr><td><font color="#FF9900" face="黑体" size="4">原图：</font></td><td><font color="#FF9900" face="黑体" size="4">垂直翻转执行结果：</font></td></tr><tr><td><img src="/images/logo.gif" border="0" id="image2"></td><td><img src="/images/logo.gif" border="0" id="image22"></td></tr></table><p><center><input type="button" name="button1" value="水平翻转" onClick="Hturn()"><input type="button" name="button2" value="垂直翻转" onClick="Vturn()"></center></p><script language="javascript">function Hturn()//水平翻转{image11.style.filter = image11.style.filter =="fliph"?"":"fliph"; }function Vturn()//垂直翻转{image22.style.filter = image22.style.filter =="flipV"?"":"flipV"; }</script></body></html>。

three3js案例

three3js案例Three.js是一个基于WebGL的JavaScript库，用于创建和展示3D图形。

它提供了丰富的功能，可以实现交互性和动画效果的3D场景。

下面将介绍三个Three.js的案例。

1.旋转的立方体在这个案例中，我们将展示一个旋转的立方体。

首先，我们需要在HTML文件中引入Three.js库，创建一个容器用于渲染3D场景。

然后，创建一个场景、相机和几何体。

我们使用BoxGeometry几何体创建一个立方体，并使用MeshBasicMaterial材质给立方体上色。

接下来，将立方体添加到场景中，并设置相机的位置。

最后，在渲染函数中使用requestAnimationFrame()方法循环渲染场景并旋转立方体。

这个案例展示了Three.js的基本用法，是入门学习的好例子。

通过修改立方体的位置、材质和相机的参数，可以得到不同的效果。

2.键盘控制的飞机这个案例展示了如何使用键盘控制三维模型的移动。

首先，我们需要加载一个飞机模型和材质，并设置其位置和大小。

然后，创建一个能够接收键盘输入的事件监听器，并在按下对应键盘按键时改变飞机的位置。

接下来，创建一个场景、相机和光源，并将飞机添加到场景中。

最后，在渲染函数中循环渲染场景，实现飞机的移动。

这个案例展示了如何通过键盘输入来控制三维模型的交互，可以用于游戏开发或者交互式应用的开发中。

3.粒子效果这个案例展示了如何使用Three.js创建粒子效果。

首先，我们需要创建一个包含粒子的几何体，并设置每个粒子的位置、颜色和大小。

然后，创建一个材质，将粒子的属性应用到该材质上。

接下来，创建一个场景、相机和渲染器，并将粒子系统添加到场景中。

最后，在渲染函数中循环渲染场景，实现粒子的动画效果。

这个案例展示了Three.js的高级用法，可以实现具有吸引力的粒子效果，用于创意艺术或者动画效果的展示中。

以上是三个Three.js的案例，分别展示了基本用法、交互控制和高级效果。

jQuery360度图像旋转插件相关介绍

jQuery360度图像旋转插件相关介绍
今天为大家介绍的是jQuery360度图像旋转插件，希望大家学业有成，工作顺利
就像我们都知道的，网站对于帮助一个公司接触到远端的人群是最重要的工具。

因此，每位网页设计师都重视创造高度吸引人的网站，将流量诱导向它。

为取得对竞争
者的优势，网站开发者们喜欢采用能帮助他们在他们的网站上增添吸引性效果的工具，特别是那些让你在网站上添加图像的工具。

当涉及在网站上展示图像时，jQuery360度图像旋转插件就是你最好的筹码。

这些插件远比Flash文件更有效，而且和响应式网页设计概念兼容。

今天小编就给大家带来你不能错过的6款jQuery360度图像旋转插件。

1.AJAX-ZOOM——360/3D旋转&缩放Javascript播放器
AJAX-ZOOM是款免费的Flash工具，有助于在网页上360度展示产品图像。

另外，这款插件让用户能在Z轴(3D)上转物体。

不仅如此，它还让用户能在每个产品的结构上深度缩放。

你可以把这款插件嵌入任何CMS或购物车。

2.Rotary View
想要让你的顾客能用鼠标来360度旋转产品图像吗?那好，Rotary View就是你的最佳方案。

它利用一整套图像来为顾客提供神奇的产品360度视角。

它是响应式的，因此在触控屏设备上也效果良好。

3.Dopeless Rotate。

使用JS实现图片翻转效果

使⽤JS实现图⽚翻转效果.flip-container {perspective:1000px;/*设置假定⼈眼到投影平⾯的距离为1000px,只影响3D元素，不影响2D元素*/ width: 1300px;margin:0 auto;}.front,.back {width:400px;height:400px;}.flipper {width: 400px;height: 400px;border-radius: 50%;margin-left:10px;margin-bottom:120px;display: inline-block;/*div横排显⽰，变成⾏级元素*/transition:0.6s;transform-style:preserve-3d;}.front,.back {width: 400px;height: 400px;border-radius: 20%;display: inline-block;}.back {display: none;/*隐藏背⾯*/}</style></head><body><div class="flip-container"><div class="flipper"><div class="front" style="background:url(imges/4.jpg) no-repeat" "></div><div class="back" style="background:url(imges/1.gif) no-repeat"></div></div><div class="flipper"><div class="front" style="background:url(imges/4.jpg) no-repeat" "></div><div class="back" style="background:url(imges/2.gif) no-repeat"></div></div><div class="flipper"><div class="front" style="background:url(imges/4.jpg) no-repeat" "></div><div class="back" style="background:url(imges/3.gif) no-repeat"></div></div><div class="flipper"><div class="front" style="background:url(imges/4.jpg) no-repeat" "></div><div class="back" style="background:url(imges/4.gif) no-repeat"></div></div><div class="flipper"><div class="front" style="background:url(imges/4.jpg) no-repeat" "> </div><div class="back" style="background:url(imges/5.gif) no-repeat"> </div></div><div class="flipper"><div class="front" style="background:url(imges/4.jpg) no-repeat" "> </div><div class="back" style="background:url(imges/6.gif) no-repeat"> </div></div></div><script>$(function(){$(".flipper").hover(function(){ //⿏标移动的function$(this).css("transform","rotateY(180deg)");//⿏标移上去旋转180度var n=$(this).index(); //找到⿏标经过的flipper$(".back").eq(n).css("display","inline-block"); //让back显⽰出来$(".front").eq(n).hide(); //隐藏front},function(){$(this).css("transform","rotateY(0deg)"); //⿏标移开让旋转度数归零var n=$(this).index();$(".front").eq(n).css("display","inline-block");$(".back").eq(n).hide();})})</script>。

原生JS实现逼真的图片3D旋转效果详解

原⽣JS实现逼真的图⽚3D旋转效果详解本⽂实例讲述了原⽣JS实现逼真的图⽚3D旋转效果。

分享给⼤家供⼤家参考，具体如下：实现效果:实现过程:步骤⼀:先写⼀个简单的html结构,创建⼀个box盒⼦,⾥⾯放对应的图⽚(也可以⽤js创建图⽚,这⾥为了好理解,我们直接⽤html创建).<body><div class="box"><img src="./img/1.jpg" alt=""><img src="./img/2.jpg" alt=""><img src="./img/3.jpg" alt=""><img src="./img/4.jpg" alt=""><img src="./img/5.jpg" alt=""><img src="./img/6.jpg" alt=""><img src="./img/7.jpg" alt=""><img src="./img/8.jpg" alt=""><img src="./img/9.jpg" alt=""><img src="./img/10.jpg" alt=""><img src="./img/11.jpg" alt=""><img src="./img/12.jpg" alt=""></div>步骤⼆:给盒⼦和图⽚,设置对应的样式<style>*{margin: 0;padding: 0;}body {background-color: #000;/*overflow: hidden;*/}#box{width:133px;height: 200px;margin: 200px auto;position:relative;border: 1px solid #fff;transform-style: preserve-3d;/*2.transform–style属性指定嵌套元素是在三维空间中呈现。

js实现3D旋转相册

js实现3D旋转相册本⽂实例为⼤家分享了js实现3D旋转相册的具体代码，供⼤家参考，具体内容如下效果展⽰：使⽤图⽚：剩余⾃⼰随意图⽚⼤⼩为133*200代码展⽰：<!DOCTYPE html><html lang="en" ondragstart="return false"><head><meta charset="UTF-8"><title>3D效果</title><style>* {background-color: #000;}.container {border: 1px solid yellow;perspective: 800px;overflow: hidden;}.box {position: relative;border: 1px solid #f00;width: 133px;height: 200px;margin: 300px auto;transform-style: preserve-3d;transform:rotateX(-20deg) rotateY(0deg);}img {position: absolute;/*设置图⽚倒影效果*/-webkit-box-reflect:below 5px -webkit-gradient(linear,left top, left bottom,from( transparent),color-stop(40%,transparent),to(rgba(250,250,250,0.4))); }</style></head><body><div class="container"><div class="box"><img src="img/1.jpg" alt=""><img src="img/2.jpg" alt=""><img src="img/3.jpg" alt=""><img src="img/4.jpg" alt=""><img src="img/5.jpg" alt=""><img src="img/6.jpg" alt=""><img src="img/7.jpg" alt=""><img src="img/8.jpg" alt=""><img src="img/9.jpg" alt=""><img src="img/10.jpg" alt=""><img src="img/11.jpg" alt=""></div></div><script>// a 获取所有 img 元素var mimg = document.querySelectorAll("img");var mlength = mimg.length;// 动态获取图⽚的旋转⾓度var mdeg = 360/mlength;//获取box 容器var mbox = document.querySelector(".box");/*页⾯加载后执⾏。

javascript结合canvas实现图片旋转效果

javascript结合canvas实现图⽚旋转效果我们在微博上可以对图⽚进⾏向左转向右转等旋转操作，让⽤户可以从不同的视⾓欣赏图⽚效果。

本⽂将结合实例为您讲解如何使⽤Javascript结合相关技术来实现图⽚的旋转效果。

我们使⽤HTML5的canvas标签可对图⽚进⾏旋转操作，对于ie6，7，8不⽀持HTML5的浏览器，我们使⽤IE特有的滤镜效果来实现图⽚旋转。

HTML我们在页⾯中放置⼀张图⽚，在图⽚的上⽅放置两个按钮，通过onclick事件调⽤rotate()函数来控制图⽚向左向右旋转。

<div id="tool"><a href="#" id="arr_left" onclick="rotate('myimg','left')">向左</a><a href="#" id="arr_right" onclick="rotate('myimg','right')">向右</a></div><div id="img"><img src="demo.jpg" width="460" height="305" alt="" id="myimg" /></div>Javascriptfunction rotate(obj,arr){var img = document.getElementById(obj);if(!img || !arr) return false;var n = img.getAttribute('step');if(n== null) n=0;if(arr=='left'){(n==0)? n=3:n--;}else if(arr=='right'){(n==3)? n=0:n++;}img.setAttribute('step',n);...}我们写了个⾃定义函数rotate（），其中参数obj表⽰要旋转的图⽚对象的id，参数arr表⽰旋转⽅向，固定两个值:left(向左)和right(向右)。

JS实现图片旋转动画效果封装与使用示例

JS实现图⽚旋转动画效果封装与使⽤⽰例本⽂实例讲述了JS实现图⽚旋转动画效果封装与使⽤。

分享给⼤家供⼤家参考，具体如下：核⼼封装代码如下：//图⽚动画封装function SearchAnim(opts) {for(var i in SearchAnim.DEFAULTS) {if (opts[i] === undefined) {opts[i] = SearchAnim.DEFAULTS[i];}}this.opts = opts;this.timer = null;this.elem = document.getElementById(opts.elemId);this.startAnim();}SearchAnim.prototype.startAnim = function () {this.stopAnim();this.timer = setInterval(() => {var startIndex = this.opts.startIndex;if (startIndex == 360) {this.opts.startIndex = 0;}this.elem.style.transform = "rotate("+ (startIndex) +"deg)";this.opts.startIndex += 5;}, this.opts.delay);setTimeout(() => {this.stopAnim();}, this.opts.duration);}SearchAnim.prototype.stopAnim = function() {if (this.timer != null) {clearInterval(this.timer);}}SearchAnim.DEFAULTS = {duration : 60000,delay : 200,direction : true,startIndex : 0,endIndex : 360}使⽤⽅法：随便创建⼀img标签然后如下调⽤即可：new SearchAnim({elemId : "wait-icon",delay : 20,});完整⽰例代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> JS旋转动画</title></head><img src="///file_images/article/201807/201879100307926.jpg" id="wait-icon"/><script>//图⽚动画封装function SearchAnim(opts) {for(var i in SearchAnim.DEFAULTS) {if (opts[i] === undefined) {opts[i] = SearchAnim.DEFAULTS[i];}}this.opts = opts;this.timer = null;this.elem = document.getElementById(opts.elemId);this.startAnim();}SearchAnim.prototype.startAnim = function () {this.stopAnim();this.timer = setInterval(() => {var startIndex = this.opts.startIndex;if (startIndex == 360) {this.opts.startIndex = 0;}this.elem.style.transform = "rotate("+ (startIndex) +"deg)";this.opts.startIndex += 5;}, this.opts.delay);setTimeout(() => {this.stopAnim();}, this.opts.duration);}SearchAnim.prototype.stopAnim = function() {if (this.timer != null) {clearInterval(this.timer);}}SearchAnim.DEFAULTS = {duration : 60000,delay : 200,direction : true,startIndex : 0,endIndex : 360}new SearchAnim({elemId : "wait-icon",delay : 20,});</script><body></body></html>更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。

js实现旋转木马轮播图效果

js实现旋转⽊马轮播图效果本⽂实例为⼤家分享了js实现旋转⽊马轮播图的具体代码，供⼤家参考，具体内容如下整个页⾯的⽂件结构如下图所⽰：html部分代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>旋转⽊马轮播图</title><link rel="stylesheet" href="css/myStyle.css" rel="external nofollow" /><script type="text/javascript" src="js/animate.js"></script><script type="text/javascript" src="js/my.js"></script></head><body><div class="wrap" id="wrap"><div class="slide" id="slide"><ul><li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li><li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li><li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li><li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li><li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li></ul><div class="arrow" id="arrow"><a href="javascript:;" class="prev" id="arrLeft"></a><a href="javascript:;" class="next" id="arrRight"></a></div></div></div></body></html>在html部分引⼊的myStyle.css⽂件部分代码@charset "UTF-8";blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{ margin:0;padding:0}body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅⿊", SimSun, "宋体", sans-serif;color:#666;}ol,ul{list-style:none}a{text-decoration:none}fieldset,img{border:0;vertical-align:top;}a,input,button,select,textarea{outline:none}a,button{cursor:pointer}.wrap{width:1200px;margin:100px auto;}.slide{height:500px;position: relative;}.slide li{position:absolute;left:200px;top:0}.slide li img{width:100%}.arrow{opacity:0;}.prev ,.next{width:76px;height:112px;position:absolute;top:50%;margin-top:-56px;background:url(../images/prev.png) no-repeat;z-index:99;}.next{right:0;background-image:url(../images/next.png);}在html部分引⼊的animate.js⽂件部分代码/*** Created by RENPINGSHENG on 2018/4/6.*/function animate(obj,json,fn) {clearInterval(obj.timer);obj.timer = setInterval(function () {var flag = true;for(var k in json){if( k == "opacity"){var leader = getStyle(obj,k) * 100;var target = json[k] * 100;var step = (target - leader) /10;step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step;obj.style[k] = leader /100;} else if ( k == "zIndex"){obj.style[k] = json[k];}else{var leader = parseInt(getStyle(obj,k)) || 0;var target = json[k];var step = (target - leader) /10;step = step >0 ? Math.ceil(step) : Math.floor(step);leader = leader + step;obj.style[k] = leader + "px";}console.log("target:" + target + "leader:" + leader + "step:" + step); if (leader != target){flag = false;}}if (flag){clearInterval(obj.timer);if(fn){fn();}}},15)}function getStyle(obj,attr){if (obj.currentStyle){return obj.currentStyle[attr];}else{return window.getComputedStyle(obj,null)[attr];}}在html部分引⼊的my.js⽂件部分代码/*** Created by RENPINGSHENG on 2018/4/6.*/window.onload = function () {var wrap = document.getElementById("wrap");var slide = document.getElementById("slide");var ul = slide.children[0];var lis = ul.children;var arrow = document.getElementById("arrow");var arrRight = document.getElementById("arrRight");var arrLeft = document.getElementById("arrLeft");var config = [{width:400,top:20,left:50,opacity:0.2,zIndex:2},{width:600,top:70,left:0,opacity:0.8,zIndex:3},{width:800,top:100,left:200,opacity:1,zIndex:4},{width:600,top:70,left:600,opacity:0.8,zIndex:3},{width:400,top:20,left:750,opacity:0.2,zIndex:2}];wrap.onmouseover = function () {animate(arrow,{"opacity":1});}wrap.onmouseout = function () {animate(arrow,{"opacity":0});}function assign() {for(var i = 0;i < lis.length;i++){animate(lis[i],config[i],function(){flag = true;})}}var flag = true;assign();arrRight.onclick = function () {flag = false;config.push(config.shift());assign();};arrLeft.onclick = function () {flag = false;config.unshift(config.pop());assign();}}代码完成后，⽤浏览器打开⽹页，效果如下：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

详解利用exif.js解决ios手机上传竖拍照片旋转90度问题

详解利⽤exif.js解决ios⼿机上传竖拍照⽚旋转90度问题HTML5+canvas进⾏移动端⼿机照⽚上传时，发现iOS⼿机上传竖拍照⽚会逆时针旋转90度，横拍照⽚⽆此问题；Android⼿机没这个问题。

因此解决这个问题的思路是：获取到照⽚拍摄的⽅向⾓，对⾮横拍的ios照⽚进⾏⾓度旋转修正。

利⽤exif.js读取照⽚的拍摄信息，这⾥主要⽤到Orientation属性。

Orientation属性说明如下：下⾯就直接上代码了。

主要有html5页⾯和⼀个js，⽰例功能包含了图⽚压缩和旋转。

⾃⼰写的是uploadImage.js。

html5测试页⾯如下：<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>图⽚上传</title><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript" src="js/uploadPicture/uploadImage.js" ></script><script type="text/javascript" src="js/exif.js" ></script><script></script></head><body><div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">上传图⽚:<input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);" /></div><div style="margin-top: 10px;"><img alt="preview" src="" id="myImage"/></div></body></html>uploadImage.js如下：function selectFileImage(fileObj) {var file = fileObj.files['0'];//图⽚⽅向⾓ added by lzkvar Orientation = null;if (file) {console.log("正在上传,请稍后...");var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图⽚格式if (!rFilter.test(file.type)) {//showMyTips("请选择jpeg、png格式的图⽚", false);return;}// var URL = URL || webkitURL;//获取照⽚⽅向⾓属性，⽤户旋转控制EXIF.getData(file, function() {// alert(EXIF.pretty(this));EXIF.getAllTags(this);//alert(EXIF.getTag(this, 'Orientation'));Orientation = EXIF.getTag(this, 'Orientation');//return;});var oReader = new FileReader();oReader.onload = function(e) {//var blob = URL.createObjectURL(file);//_compress(blob, file, basePath);var image = new Image();image.src = e.target.result;image.onload = function() {var expectWidth = this.naturalWidth;var expectHeight = this.naturalHeight;if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {expectWidth = 800;expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;} else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {expectHeight = 1200;expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;}var canvas = document.createElement("canvas");var ctx = canvas.getContext("2d");canvas.width = expectWidth;canvas.height = expectHeight;ctx.drawImage(this, 0, 0, expectWidth, expectHeight);var base64 = null;//修复iosif (erAgent.match(/iphone/i)) {console.log('iphone');//alert(expectWidth + ',' + expectHeight);//如果⽅向⾓不为1，都需要进⾏旋转 added by lzkif(Orientation != "" && Orientation != 1){alert('旋转处理');switch(Orientation){case 6://需要顺时针（向左）90度旋转alert('需要顺时针（向左）90度旋转');rotateImg(this,'left',canvas);break;case 8://需要逆时针（向右）90度旋转alert('需要顺时针（向右）90度旋转');rotateImg(this,'right',canvas);break;case 3://需要180度旋转alert('需要180度旋转');rotateImg(this,'right',canvas);//转两次rotateImg(this,'right',canvas);break;}}/*var mpImg = new MegaPixImage(image);mpImg.render(canvas, {maxWidth: 800,maxHeight: 1200,quality: 0.8,orientation: 8});*/base64 = canvas.toDataURL("image/jpeg", 0.8);}else if (erAgent.match(/Android/i)) {// 修复androidvar encoder = new JPEGEncoder();base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80); }else{//alert(Orientation);if(Orientation != "" && Orientation != 1){//alert('旋转处理');switch(Orientation){case 6://需要顺时针（向左）90度旋转alert('需要顺时针（向左）90度旋转');rotateImg(this,'left',canvas);break;case 8://需要逆时针（向右）90度旋转alert('需要顺时针（向右）90度旋转');rotateImg(this,'right',canvas);break;case 3://需要180度旋转alert('需要180度旋转');rotateImg(this,'right',canvas);//转两次rotateImg(this,'right',canvas);break;}}base64 = canvas.toDataURL("image/jpeg", 0.8);}//uploadImage(base64);$("#myImage").attr("src", base64);};};oReader.readAsDataURL(file);}}//对图⽚旋转处理 added by lzkfunction rotateImg(img, direction,canvas) {//alert(img);//最⼩与最⼤旋转⽅向，图⽚旋转4次后回到原⽅向var min_step = 0;var max_step = 3;//var img = document.getElementById(pid);if (img == null)return;//img的⾼度和宽度不能在img元素隐藏后获取，否则会出错var height = img.height;var width = img.width;//var step = img.getAttribute('step');var step = 2;if (step == null) {step = min_step;}if (direction == 'right') {step++;//旋转到原位置，即超过最⼤值step > max_step && (step = min_step);} else {step--;step < min_step && (step = max_step);}//img.setAttribute('step', step);/*var canvas = document.getElementById('pic_' + pid);if (canvas == null) {img.style.display = 'none';canvas = document.createElement('canvas');canvas.setAttribute('id', 'pic_' + pid);img.parentNode.appendChild(canvas);} *///旋转⾓度以弧度值为参数var degree = step * 90 * Math.PI / 180;var ctx = canvas.getContext('2d');switch (step) {case 0:canvas.width = width;canvas.height = height;ctx.drawImage(img, 0, 0);break;case 1:canvas.width = height;canvas.height = width;ctx.rotate(degree);ctx.drawImage(img, 0, -height);break;case 2:canvas.width = width;canvas.height = height;ctx.rotate(degree);ctx.drawImage(img, -width, -height);break;case 3:canvas.width = height;canvas.height = width;ctx.rotate(degree);ctx.drawImage(img, -width, 0);break;}}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<立体感图片旋转>
<style type="text/css">
body{background:black}
.point{position:absolute;height:75px;border:1px silver solid}
#round{position:absolute;background:red;width:200px;height:200px;} </style>
<script>
var r=200,dv=0.01,w=100,x=400;y=100,pn=8
var pi=3.1415926575,d=pi/2;
var pd=Math.asin(w/2/r);ed=pi*2/pn;smove=true
function
window.onload(){
var o=document.getElementById("imground");
var arrimg=o.getElementsByTagName("img");
for (n=0;n<arrimg.length;n++){
arrimg[n].onmouseout=function(){smove=true;}
arrimg[n].onmouseover=function(){smove=false;}
arrimg[n].onmousedown=function(){dv=dv*2}
}
setInterval(roundMove,20);
}
function roundMove(){
for (n=1;n<=8;n++){
var o=document.getElementById("p"+n)
var ta=Math.sin(d+ed*n);
var strFilter;
if (ta<0) o.style.left=Math.cos(d+ed*n-pd)*r+x;
else o.style.left=Math.cos(d+ed*n+pd)*r+x;
o.style.top=ta*10+10+y;
o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r;
o.style.zIndex=ta*10;
if (o.style.zIndex<0) strFilter="FlipH(enabled:true)"
else strFilter="FlipH(enabled:false)";
if (ta<0) ta=(ta+1)*80+20; else ta=100;
strFilter=strFilter+" alpha(opacity="+ta+")";
o.style.opacity=ta/100;
o.style.filter=strFilter;
}
if (smove) d=d+dv;
}
</script>
<div id="imground">
<img class="point" id="p1" src=" images/21.jpg"/>
<img class="point" id="p2" src=" images/4.gif"/>
<img class="point" id="p3" src=" images/1.gif"/>
<img class="point" id="p4" src="images/1359946648849.jpg"/> <img class="point" id="p5" src=" images/0000.jpg"/>
<img class="point" id="p6" src=" images/图像合成2.jpg"/>
<img class="point" id="p7" src=" images/201261517275365.jpg"/> <img class="point" id="p8" src=" images/空中滑板.jpg"/>
</div>。