首页
所有分类
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 相关文章推荐
通过修改referer下载文件的方法
May 11 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
javascript实现的简单计时器
Jul 19 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
详解JavaScript表单验证（E-mail 验证）
Mar 31 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 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
蓝牙(1) 鸿蒙3.0(1) 蓝牙耳机(1) 鸿蒙(2) xhunter1.sys(1) 华为(1) 虚拟键盘(1) RustDesk(1) Debian(1) HarmonyOS(1)
You might like
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
深入理解PHP 数组之count 函数
2016/06/13 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
div层的移动及性能优化
2010/11/16 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
js实现简易的单数字随机抽奖（0-9）
2020/03/19 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
2018/06/20 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
JS字符串常用操作方法实例小结
2019/06/24 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
基于python神经卷积网络的人脸识别
2018/05/24 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Python安装whl文件过程图解
2020/02/18 Python
米兰必去买手店排行榜首位：Antonioli
2016/09/11 全球购物
Hotels.com台湾：饭店订房网
2017/09/06 全球购物
澳大利亚在线生活方式商店：Mytopia
2018/07/08 全球购物
简历中个人求职的自我评价模板
2013/11/29 职场文书
城管综合整治方案
2014/05/01 职场文书
化学教育专业自荐信
2014/07/04 职场文书
春季运动会开幕词
2015/01/28 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
100句拼搏进取的名言警句，值得一读！
2019/10/07 职场文书
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python