成都IT培训学校

纯js实现支持触摸的3D照片墙

2016-09-07 15:37 作者:gongzhen 来源:简书 浏览: 我要评论(条) 字号:

摘要:继上一篇如何用H5实现一个触屏版的轮播器?之后,又写了一个具有3D效果的照片墙,支持触摸操作,在手机上也可以使用。效果如下: 该组件以两种形式提供,一种以js库形式提供,需要使用者自行拷贝html和css代码;另一种被封装成react组件,使用者只需提供几个

  继上一篇如何用H5实现一个触屏版的轮播器?之后,又写了一个具有3D效果的照片墙,支持触摸操作,在手机上也可以使用。效果如下:



  该组件以两种形式提供,一种以js库形式提供,需要使用者自行拷贝html和css代码;另一种被封装成react组件,使用者只需提供几个属性即可。下面具体介绍两种形式的使用方法。
 
  js库
 
  具体可参考github上的示例 3d-touch-gallery
 
  首先添加样式:
 
  <link rel="stylesheet" type="text/css" href="lib/gallery.css" />
 
  按照如下格式定义html,item-wrapper和item类是必须的:
 
  <div id="dg-container" class="dg-container">
 
  <div class="item-wrapper">
 
  <a class="item" href="#">&lt;img src="images/1.jpg" alt="image01"&gt;<div>http://www.colazionedamichy.it/</div></a>
 
  <a class="item" href="#">&lt;img src="images/2.jpg" alt="image02"&gt;<div>http://www.percivalclo.com/</div></a>
 
  <a class="item" href="#">&lt;img src="images/3.jpg" alt="image03"&gt;<div>http://www.wanda.net/fr</div></a>
 
  <a class="item" href="#">&lt;img src="images/4.jpg" alt="image04"&gt;<div>http://lifeingreenville.com/</div></a>
 
  <a class="item" href="#">&lt;img src="images/5.jpg" alt="image05"&gt;<div>http://circlemeetups.com/</div></a>
 
  <a class="item" href="#">&lt;img src="images/6.jpg" alt="image06"&gt;<div>http://www.castirondesign.com/</div></a>
 
  </div>
 
  </div>
 
  引用gallery.js文件:
 
  <script type="text/javascript" src="lib/gallery.js"></script>
 
  调用createGallery方法,该方法会返回一个对象,该对象提供3个方法:
 
  bindTouchEvent():支持触摸
 
  prev():翻到前一页
 
  next():翻到下一页
 
  var gallery = createGallery(document.getElementsByClassName('dg-container')[0]);
 
  gallery.bindTouchEvent(); //调用此函数可支持触摸滑动
 
  var btnPrev = document.getElementsByClassName('dg-prev')[0];
 
  var btnNext = document.getElementsByClassName('dg-next')[0];
 
  btnPrev.addEventListener('click', function () {
 
  gallery.prev();
 
  });
 
  btnNext.addEventListener('click', function () {
 
  gallery.next();
 
  });
 
  react组件
 
  具体可参考github上的示例Touch3DGallery,该示例工程使用脚手架generator-react-web-app生成。
 
  可向该组件传递三个prop:
 
  items:图片数组,数组元素是一个包含image和text属性的对象
 
  touch:bool类型,设为true可使组件支持触摸滑动,在手机上使用时需设为true
 
  onMounted:func类型,该回调会回传一个gallery对象给父组件,父组件可通过该对象控制组件的翻页
 
  具体使用方法如下:
 
  import React from 'react';
 
  import Touch3DGallery from '/components/Touch3DGallery/Touch3DGallery';
 
  var items = [
 
  {
 
  image: require('//images/1.jpg'),
 
  text: 'http://www.percivalclo.com'
 
  },
 
  {
 
  image: require('//images/2.jpg'),
 
  text: 'http://www.wanda.net/fr'
 
  },
 
  {
 
  image: require('//images/3.jpg'),
 
  text: 'http://lifeingreenville.com'
 
  },
 
  {
 
  image: require('//images/4.jpg'),
 
  text: 'http://circlemeetups.com'
 
  },
 
  {
 
  image: require('//images/5.jpg'),
 
  text: 'http://www.castirondesign.com'
 
  },
 
  {
 
  image: require('//images/6.jpg'),
 
  text: 'http://www.mathiassterner.com/home'
 
  }
 
  ];
 
  var App = React.createClass({
 
  _gallery: null,
 
  render() {
 
  return (
 
  <div className="app">
 
  <div className="gallery-container">
 
  <Touch3DGallery items={items} onMounted={this.onGalleryMounted} touch={false}/>
 
  </div>
 
  <nav>
 
  <button onClick={this.onPrev}>《/button>
 
  <button onClick={this.onNext}》</button>
 
  </nav>
 
  </div>
 
  );
 
  },
 
  onGalleryMounted(gallery) {
 
  this._gallery = gallery;
 
  },
 
  onPrev() {
 
  if (this._gallery) {
 
  this._gallery.prev();
 
  }
 
  },
 
  onNext() {
 
  if (this._gallery) {
 
  this._gallery.next();
 
  }
 
  }
 
  });
 
  module.exports = App;
 
  
顶一下
(0)
0%
踩一下
(0)
0%
标签:
版权所有: 非特殊声明均为本站原创文章,转载请注明出处: 成都学前端开发网-web.ixueyun.com
订阅更新: 您可以通过RSS订阅我们的内容更新

当前栏目分类