js旋转木马

lqm123
lqm123 发布于 2017-03-17 14:21:32 浏览:1467 类型:原创 - 随笔 分类:HTML/CSS - html 二维码: 作者原创 版权保护
<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">
	<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>
标签:
z
给个赞 43 人点赞
收藏 45 人收藏
评论 已有 4 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
路小川
路小川4 天前4F
双击666
举报 支持 (0) 回复 (0)
18514058338
185140583384 天前3F
好牛掰啊
举报 支持 (0) 回复 (0)
hizf
hizf6 天前2F
帅气
举报 支持 (0) 回复 (0)
zyy6681
zyy66817 天前1F
写成个插件比较好,方便用。emoticon
举报 支持 (0) 回复 (0)
lqm123 lqm123 作者

作者最新