欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现旋转木马效果

程序员文章站 2022-06-13 18:26:12
效果图: 代码如下: &l...

效果图:

js实现旋转木马效果

代码如下:

<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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!