当前位置：首页 > 网页特效 > 其他

支持元素惯性拖放和多点触摸手势的js插件

分类：其他日期：2024-05-14 点击(1) 评论(0)

简介

##### 互动
interact函数接收一个元素或CSS选择器和一个可选的options选项。它返回Interactable对象，该对象有一些方法和属性可以配置哪些事件可以触发以及修改结果坐标。这些方法都可以通过链式编程的方式来调用。

```html
interact('.drag-and-resize')
  .draggable({
    snap: {
      targets: [
        { x: 100, y: 200 },
        function (x, y) { return { x: x % 20, y: y }; }
    ]}
  })
  .resizable({
    inertia: true
  });                
```
#####  选择器上下文
如果你想用选择器来选择一些元素，并且只想选择某些元素的子元素，可以在插件Interactable对象时，在options对象中传入一个context元素。

通过使用同样的选择器但是指定不同的上下文，interact会返回不同的对象。默认的上下文是document。

```html
<ul id="my-list">
  <li> item 1 </li>
  <li> item 2 </li>
  <li> item 3 </li>
</ul>                
var myList = document.querySelector('#my-list');
 
interact('li', {
    context: myList
  })
  .draggable({ /* ... */ });
If you want to use a selector to target elements but only want to to target the children of a certain element, add a context element to the options object when creating the Interactable.
 
interact('li') === interact('li', { context: document })  // true
interact('li') === interact('li', { context: myList })    // false              
```  
#####  配置参数
draggable、resizable和gesturable方法使用true和false来简单的允许或不允许某些行为，或者使用一个带属性的对象来改变某些设置。

```html
interact(target)
  .draggable({
    max          : Number,
    maxPerElement: Number,
    manualStart  : Boolean,
    snap         : {/* ... */},
    restrict     : {/* ... */},
    inertia      : {/* ... */},
    autoScroll   : {/* ... */},
 
    axis         : 'x' || 'y'
 
  })
  .resizable({
    max          : Number,
    maxPerElement: Number,
    manualStart  : Boolean,
    snap         : {/* ... */},
    restrict     : {/* ... */},
    inertia      : {/* ... */},
    autoScroll   : {/* ... */},
 
    square       : true || false,
    axis         : 'x' || 'y'
  })
  .gesturable({
    max          : Number,
    maxPerElement: Number,
    manualStart  : Boolean,
    restrict     : {/* ... */}
  });    
```            
- enabled：允许交互行为。如果对象参数中没有enabled选项或属性值为true那么可以执行交互行为。
- max：max用于限制发生交互作用对象的数量。默认情况下任何数量的对象都可以发生交互作用。
- maxPerElement：By default only 1 interaction can target the same interactable+element combination. If you want to allow multiple interactions on the same target element, set the maxPerElement property of your object to a value >= 2.
- manualStart：设置为true时， drag, resize 和 gesture行为将被执行。
- snap：改变drag 和 resize的snapping 设置。
- restrict：改变 drag, resize 和 gesture的限制设置。
- inertia：改变 drag 和 resize的惯性设置。
- autoScroll：当 drag 或 resize发生边界溢出时滚动容器（window或一个HTML元素）

web299.com

支持元素惯性拖放和多点触摸手势的js插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果