首页
所有分类
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 相关文章推荐
js 无提示关闭浏览器页面的代码
Mar 09 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
详解javascript高级定时器
Dec 31 Javascript
7个去伪存真的JavaScript面试题
Jan 07 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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) Pytesseract(1) 匹配文本(1) GNN(1) 验证码(1) flex(1) flex-shrink(1) 文字识别(1) SFTP(3) 追加文本(1)
You might like
php 记录进行累加并显示总时长为秒的结果
2011/11/04 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
PHP定时执行任务的3种方法详解
2015/12/21 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
微信小程序 POST请求（网络请求）详解及实例代码
2016/11/16 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
2017/08/02 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
微信小程序中网络请求缓存的解决方法
2019/12/29 Javascript
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
python直接访问私有属性的简单方法
2016/07/25 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python遍历pandas数据方法总结
2018/02/09 Python
简单实现python数独游戏
2018/03/30 Python
python 获取图片分辨率的方法
2019/01/08 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
耐克美国官网：Nike.com
2016/08/01 全球购物
La Senza官网：北美顶尖性感内衣品牌
2018/08/03 全球购物
COSETTE官网：奢华，每天
2020/03/22 全球购物
创业者是否需要商业计划书？
2014/02/07 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
初中教师个人总结
2015/02/10 职场文书
2015年幼儿园中班工作总结
2015/04/25 职场文书
python接口测试返回数据为字典取值方式
2022/02/12 Python