首页
所有分类
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函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
基于jquery的跨域调用文件
Nov 19 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
Dec 30 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
jQuery实现获取h1-h6标题元素值的方法
Mar 06 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
Angular脚手架开发的实现步骤
Apr 09 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) 西索(1) Docker(14) 最终幻想(1) 守望先锋(1) explain(2) 城市猎人(1) 巫师(1) 波段(1) AngularJS(2)
You might like
wordpress之wp-settings.php
2007/08/17 PHP
php实现文件下载更能介绍
2012/11/23 PHP
PHP基本语法总结
2014/09/06 PHP
PHP程序员常见的40个陋习,你中了几个？
2014/11/20 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
PHP+jQuery翻板抽奖功能实现
2015/10/19 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
用Python遍历C盘dll文件的方法
2015/05/06 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
python计算圆周率pi的方法
2015/07/11 Python
对于Python中RawString的理解介绍
2016/07/07 Python
浅谈django中的认证与登录
2016/10/31 Python
Python2中文处理纪要的实现方法
2018/03/10 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
日本订房网站，预订日本星级酒店/温泉旅馆：Relux（支持中文）
2020/01/03 全球购物
印度第一网上礼品店：IGP.com
2020/02/06 全球购物
临床医学系毕业生推荐信
2013/11/09 职场文书
小区门卫值班制度
2014/01/24 职场文书
员工团队活动方案
2014/08/28 职场文书
通知范文怎么写
2015/04/16 职场文书
宾馆安全管理制度
2015/08/06 职场文书
美德少年事迹材料（2016推荐版）
2016/02/25 职场文书
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers