js实现旋转木马效果
程序员文章站
2023-11-15 16:32:58
效果图:
代码如下:
&l...
效果图:
代码如下:
<html class=" js csstransforms3d" lang="zh"><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css3 3d transforms-旋转木马</title> <link rel="stylesheet" type="text/css" href="http://www.htmleaf.com/pins/1412/201502062108/css/style.css" rel="external nofollow" > <style media="screen"> .container { width: 210px; height: 140px; position: relative; margin: 50px auto 40px; border: 1px solid #ccc; -webkit-perspective: 1100px; -moz-perspective: 1100px; -o-perspective: 1100px; perspective: 1100px; } #carousel { width: 100%; height: 100%; position: absolute; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .ready #carousel { -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; } #carousel.panels-backface-invisible figure { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } #carousel figure { display: block; position: absolute; width: 186px; height: 116px; left: 10px; top: 10px; border: 2px solid black; line-height: 116px; font-size: 80px; font-weight: bold; color: white; text-align: center; } .ready #carousel figure { -webkit-transition: opacity 1s, -webkit-transform 1s; -moz-transition: opacity 1s, -moz-transform 1s; -o-transition: opacity 1s, -o-transform 1s; transition: opacity 1s, transform 1s; } #options{ margin-top: 200px; width: 100%; text-align: center; } #options button{padding: 0.5em 1.5em;border: 2px solid #6699cc;background: #fff;} </style> <!--[if ie]> <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script> <![endif]--> </head> <section class="container"> <div id="carousel" style="transform: translatez(-286px) rotatey(0deg);"> <figure style="opacity: 1; background-color: rgba(255, 0, 0, 0.8); transform: rotatey(0deg) translatez(286px);">1</figure> <figure style="opacity: 1; background-color: rgba(255, 170, 0, 0.8); transform: rotatey(40deg) translatez(286px);">2</figure> <figure style="opacity: 1; background-color: rgba(169, 255, 0, 0.8); transform: rotatey(80deg) translatez(286px);">3</figure> <figure style="opacity: 1; background-color: rgba(0, 255, 0, 0.8); transform: rotatey(120deg) translatez(286px);">4</figure> <figure style="opacity: 1; background-color: rgba(0, 255, 169, 0.8); transform: rotatey(160deg) translatez(286px);">5</figure> <figure style="opacity: 1; background-color: rgba(0, 169, 255, 0.8); transform: rotatey(200deg) translatez(286px);">6</figure> <figure style="opacity: 1; background-color: rgba(0, 0, 255, 0.8); transform: rotatey(240deg) translatez(286px);">7</figure> <figure style="opacity: 1; background-color: rgba(170, 0, 255, 0.8); transform: rotatey(280deg) translatez(286px);">8</figure> <figure style="opacity: 1; background-color: rgba(255, 0, 169, 0.8); transform: rotatey(320deg) translatez(286px);">9</figure> <figure style="opacity: 0; transform: none;">10</figure> <figure style="opacity: 0; transform: none;">11</figure> <figure style="opacity: 0; transform: none;">12</figure> <figure style="opacity: 0; transform: none;">13</figure> <figure style="opacity: 0; transform: none;">14</figure> <figure style="opacity: 0; transform: none;">15</figure> <figure style="opacity: 0; transform: none;">16</figure> <figure style="opacity: 0; transform: none;">17</figure> <figure style="opacity: 0; transform: none;">18</figure> <figure style="opacity: 0; transform: none;">19</figure> <figure style="opacity: 0; transform: none;">20</figure> </div> </section> <section id="options"> <p> <label for="panel-count">个数</label> <input id="panel-count" value="9" min="3" max="20" type="range"> <span class=" range-display"></span></p> <p id="navigation"> <button id="previous" data-increment="-1">上一页</button> <button id="next" data-increment="1">下一页</button> </p> <p> <button id="toggle-axis">横竖切换</button> </p> <p> <button id="toggle-backface-visibility">背面可见切换</button> </p> </section> </div> <script src="http://www.htmleaf.com/pins/1412/201502062108/js/utils.js"></script> <script> var transformprop = modernizr.prefixed('transform'); function carousel3d ( el ) { this.element = el; this.rotation = 0; this.panelcount = 0; this.totalpanelcount = this.element.children.length; this.theta = 0; this.ishorizontal = true; } carousel3d.prototype.modify = function() { var panel, angle, i; this.panelsize = this.element[ this.ishorizontal ? 'offsetwidth' : 'offsetheight' ]; this.rotatefn = this.ishorizontal ? 'rotatey' : 'rotatex'; this.theta = 360 / this.panelcount; // do some trig to figure out how big the carousel // is in 3d space this.radius = math.round( ( this.panelsize / 2) / math.tan( math.pi / this.panelcount ) ); for ( i = 0; i < this.panelcount; i++ ) { panel = this.element.children[i]; angle = this.theta * i; panel.style.opacity = 1; panel.style.backgroundcolor = 'hsla(' + angle + ', 100%, 50%, 0.8)'; // rotate panel, then push it out in 3d space panel.style[ transformprop ] = this.rotatefn + '(' + angle + 'deg) translatez(' + this.radius + 'px)'; } // hide other panels for ( ; i < this.totalpanelcount; i++ ) { panel = this.element.children[i]; panel.style.opacity = 0; panel.style[ transformprop ] = 'none'; } // adjust rotation so panels are always flat this.rotation = math.round( this.rotation / this.theta ) * this.theta; this.transform(); }; carousel3d.prototype.transform = function() { // push the carousel back in 3d space, // and rotate it this.element.style[ transformprop ] = 'translatez(-' + this.radius + 'px) ' + this.rotatefn + '(' + this.rotation + 'deg)'; }; var init = function() { var carousel = new carousel3d( document.getelementbyid('carousel') ), panelcountinput = document.getelementbyid('panel-count'), axisbutton = document.getelementbyid('toggle-axis'), navbuttons = document.queryselectorall('#navigation button'), onnavbuttonclick = function( event ){ var increment = parseint( event.target.getattribute('data-increment') ); carousel.rotation += carousel.theta * increment * -1; carousel.transform(); }; // populate on startup carousel.panelcount = parseint( panelcountinput.value, 10); carousel.modify(); axisbutton.addeventlistener( 'click', function(){ carousel.ishorizontal = !carousel.ishorizontal; carousel.modify(); }, false); panelcountinput.addeventlistener( 'change', function( event ) { carousel.panelcount = event.target.value; carousel.modify(); }, false); for (var i=0; i < 2; i++) { navbuttons[i].addeventlistener( 'click', onnavbuttonclick, false); } document.getelementbyid('toggle-backface-visibility').addeventlistener( 'click', function(){ carousel.element.toggleclassname('panels-backface-invisible'); }, false); settimeout( function(){ document.body.addclassname('ready'); }, 0); }; window.addeventlistener( 'domcontentloaded', init, false); </script> <p id="disclaimer">对不起,你的浏览器不支持css 3d transforms。</p> </body></html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!