Question

我正在尝试使用hammer.js v2.0.4

旋转div

HTML

<div class="trans-circle" id="circleDiv">
  <div class="border-circle">
    <div class="large-circle">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br/><br/> Amirzai Sangin<br/>Minister of Communications<br/> Afghanisthan</p>
    </div>
    <div class="mini-circles1">
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. <br/><br/> John Campbell<br>President and CEO<br> Toranto Waterfront Revitalization Corportation</p>
    </div>                
  </div>
</div>

JS

var trans = document.getElementById('circleDiv');
var tra = new Hammer(trans);

tra.get('rotate').set({ enable: true });

rev.on("rotate", function(event) {
event.preventDefault();
    alert('rotated');

});

但是div没有旋转，在这里做错了什么事？

Answer 1

你有一个拼写错误＆＃34; rev ＆＃34;定义旋转功能时。
它应该应用于 tra 而不是rev。（否则tra应该被命名为rev，哪个方向。）

请参阅下面的更正版本。检查第tra.on("rotate", function....行

var trans = document.getElementById('circleDiv');
var tra = new Hammer(trans);

tra.get('rotate').set({ enable: true });

tra.on("rotate", function(event) {
event.preventDefault();
  alert('rotated');
});

别忘了添加hammer.js库：

 <script type="text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"></script>

Answer 2

相关事件属性为event.rotation。

如何使用hammer.js 2.0.4旋转div

2 个答案: