js实现旋转木马效果


Posted in Javascript onMarch 17, 2017

效果图:

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>

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

Javascript 相关文章推荐
JavaScript 数组循环引起的思考
Jan 01 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
Oct 31 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
React组件内事件传参实现tab切换的示例代码
Jul 04 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
jQuery实现验证码功能
Mar 17 #Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 #Javascript
node操作mysql数据库实例详解
Mar 17 #Javascript
vue.js从安装到搭建过程详解
Mar 17 #Javascript
超简单的Vue.js环境搭建教程
Mar 17 #Javascript
Vue.js开发环境快速搭建教程
Mar 17 #Javascript
原生js编写2048小游戏
Mar 17 #Javascript
You might like
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
非常好的js代码
2006/06/27 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
一个简单的jQuery插件制作 学习过程及实例
2010/04/25 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
jQuery实现二维码扫描功能
2017/01/09 Javascript
vue注册组件的几种方式总结
2018/03/08 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
python使用PIL缩放网络图片并保存的方法
2015/04/24 Python
Python 处理数据的实例详解
2017/08/10 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
python+pygame实现坦克大战
2019/09/10 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
终于搞懂了Keras中multiloss的对应关系介绍
2020/06/22 Python
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
优秀员工评语
2014/02/10 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
2015年路政工作总结
2015/05/22 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
sql server 累计求和实现代码
2022/02/28 SQL Server
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers