首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

js实现旋转木马效果

- Author -

lqm123

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript设置FieldSet展开与收缩
May 15 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
jQuery插件实现文件上传功能（支持拖拽）
Aug 27 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
Mar 21 Javascript
iView框架问题整理小结
Oct 16 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
浅谈 JavaScript 沙箱Sandbox
Nov 02 Javascript
处理canvas绘制图片模糊问题
May 11 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
证婚词(21) 创业计划书(312) 演讲稿(869) 职业生涯规划书(234) 岗位职责(1324) 思想汇报(404) 心得体会(660) 欢迎词(65) 介绍信(57) 道歉信(39)
You might like
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
php数组(array)输出的三种形式详解
2013/06/05 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
为你总结一些php系统类函数
2015/10/21 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
javascript确认框的三种使用方法
2013/12/17 Javascript
基于jquery实现复选框全选，反选，全不选等功能
2015/10/16 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
pygame学习笔记（3）：运动速率、时间、事件、文字
2015/04/15 Python
python爬虫实现教程转换成 PDF 电子书
2017/02/19 Python
python常见排序算法基础教程
2017/04/13 Python
python爬取淘宝商品销量信息
2018/11/16 Python
Python 文件操作之读取文件(read)，文件指针与写入文件(write)，文件打开方式示例
2019/09/29 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
python中count函数知识点浅析
2020/12/17 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
联想英国官网：Lenovo英国
2019/07/17 全球购物
大学生个人简历中的自我评价
2013/12/27 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
行政文员岗位职责
2015/02/04 职场文书
2015年人事科工作总结
2015/04/28 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
详解Python函数print用法
2021/06/18 Python
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
windows系统安装配置nginx环境
2022/06/28 Servers